added show-tip to slider and added always to tooltip

Rijn
1 parent c13e7cea
Showing 3 changed files with 22 additions and 5 deletions Show diff stats
src/components/slider/slider.vue
src/components/tooltip/tooltip.vue
test/routers/slider.vue
@@ -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 () {
@@ -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>