Merge pull request #300 from rijn/295

added show-tip to slider and added always to tooltip

Merge pull request #300 from rijn/295
added show-tip to slider and added always to tooltip
Aresn · GitHub
2 parents 48dd8ebf 8ed5fd0c
Showing 5 changed files with 55 additions and 7 deletions Show diff stats
src/components/modal/confirm.js
src/components/slider/slider.vue
src/components/tooltip/tooltip.vue
test/routers/more.vue
test/routers/slider.vue
@@ -17,7 +17,7 @@ Modal.newInstance = properties =&gt; {
  
     const div = document.createElement('div');
     div.innerHTML = `
-        <Modal${props} :visible.sync="visible" :width="width">
+        <Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
             <div class="${prefixCls}">
                 <div class="${prefixCls}-head">
                     <div class="${prefixCls}-head-title">{{{ title }}}</div>
@@ -49,7 +49,8 @@ Modal.newInstance = properties =&gt; {
             cancelText: t('i.modal.cancelText'),
             showCancel: false,
             loading: false,
-            buttonLoading: false
+            buttonLoading: false,
+            scrollable: false
         }),
         computed: {
             iconTypeCls () {
@@ -153,6 +154,10 @@ Modal.newInstance = properties =&gt; {
                 modal.$parent.loading = props.loading;
             }
  
+            if ('scrollable' in props) {
+                modal.$parent.scrollable = props.scrollable;
+            }
+
             // notice when component destroy
             modal.$parent.onRemove = props.onRemove;
  
@@ -18,7 +18,7 @@
                     :class="[prefixCls + '-button-wrap']"
                     :style="{left: firstPosition + '%'}"
                     @mousedown="onFirstButtonDown">
-                    <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip>
+                    <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
                         <div :class="button1Classes"></div>
                     </Tooltip>
                 </div>
@@ -26,7 +26,7 @@
                     :class="[prefixCls + '-button-wrap']"
                     :style="{left: secondPosition + '%'}"
                     @mousedown="onSecondButtonDown">
-                    <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2>
+                    <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip2>
                         <div :class="button2Classes"></div>
                     </Tooltip>
                 </div>
@@ -36,7 +36,7 @@
                     :class="[prefixCls + '-button-wrap']"
                     :style="{left: singlePosition + '%'}"
                     @mousedown="onSingleButtonDown">
-                    <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip>
+                    <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
                         <div :class="buttonClasses"></div>
                     </Tooltip>
                 </div>
@@ -47,7 +47,7 @@
 <script>
     import InputNumber from '../../components/input-number/input-number.vue';
     import Tooltip from '../../components/tooltip/tooltip.vue';
-    import { getStyle } from '../../utils/assist';
+    import { getStyle, oneOf } from '../../utils/assist';
  
     const prefixCls = 'ivu-slider';
  
@@ -91,6 +91,13 @@
                 default (val) {
                     return val;
                 }
+            },
+            showTip: {
+                type: String,
+                default: 'hover',
+                validator (value) {
+                    return oneOf(value, ['hover', 'always', 'never']);
+                }
             }
         },
         data () {
@@ -173,6 +180,9 @@
             },
             sliderWidth () {
                 return parseInt(getStyle(this.$els.slider, 'width'), 10);
+            },
+            tipDisabled () {
+                return this.tipFormat(this.value[0]) === null || this.showTip === 'never';
             }
         },
         watch: {
@@ -3,7 +3,7 @@
         <div :class="[prefixCls + '-rel']" v-el:reference>
             <slot></slot>
         </div>
-        <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
+        <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && (visible || always)">
             <div :class="[prefixCls + '-content']">
                 <div :class="[prefixCls + '-arrow']"></div>
                 <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
@@ -41,6 +41,10 @@
             controlled: {    // under this prop,Tooltip will not close when mouseleave
                 type: Boolean,
                 default: false
+            },
+            always: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -8,6 +8,11 @@
         top: 0;
     }
     }
+
+    .placeholder {
+        min-height: 2000px;
+        width: 1px;
+    }
 </style>
 <template>
     <i-button @click="modal9 = true">距离顶部 20px</i-button>
@@ -28,6 +33,9 @@
         <p>对话框内容</p>
         <p>对话框内容</p>
     </Modal>
+    <i-button @click="instance(true)">Create Instance Scrollable</i-button>
+    <i-button @click="instance(false)">Create Instance Non-scrollable</i-button>
+    <div class="placeholder"></div>
 </template>
 <script>
     export default {
@@ -35,6 +43,24 @@
             return {
                 modal9: false,
                 modal10: false,
+                modal1: false,
+                scrollable: false
+            }
+        },
+        methods: {
+            ok () {
+                this.$nextTick(() => this.modal1 = true);
+                this.$Message.info('点击了确定');
+            },
+            cancel () {
+                this.$Message.info('点击了取消');
+            },
+            instance (scrollable) {
+                this.$Modal.info({
+                    title: 'test',
+                    content: 'test',
+                    scrollable: scrollable
+                });
             }
         }
     }
@@ -14,6 +14,9 @@
         </div>
         <Slider :value="75"></Slider>
         <Slider :value="[20, 50]" range></Slider>
+        <Slider :value="[20, 50]" show-tip="always"></Slider>
+        <Slider :value="[20, 50]" show-tip="hover"></Slider>
+        <Slider :value="[20, 50]" show-tip="never"></Slider>
     </div>
 </template>
 <script>