Slider: add show-tooltip prop

examples/docs/en-US/slider.md

@@ -4,11 +4,12 @@
       return {
         value1: 0,
         value2: 50,
-        value3: 42,
+        value3: 36,
-        value4: 0,
+        value4: 42,
         value5: 0,
         value6: 0,
-        value7: [4, 8]
+        value7: 0,
+        value8: [4, 8]
       };
     }
   }
@@ -34,9 +35,13 @@ The current value is displayed when the slider is being dragged.
     <span class="demonstration">Customized initial value</span>
     <el-slider v-model="value2"></el-slider>
   </div>
+  <div class="block">
+    <span class="demonstration">Hide Tooltip</span>
+    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
+  </div>
   <div class="block">
     <span class="demonstration">Disabled</span>
-    <el-slider v-model="value3" disabled></el-slider>
+    <el-slider v-model="value4" disabled></el-slider>
   </div>
 </template>
 
@@ -46,7 +51,8 @@ The current value is displayed when the slider is being dragged.
       return {
         value1: 0,
         value2: 50,
-        value3: 42
+        value3: 36,
+        value4: 42
       }
     }
   }
@@ -65,14 +71,14 @@ The options can be discrete.
   <div class="block">
     <span class="demonstration">Breakpoints not displayed</span>
     <el-slider
-      v-model="value4"
+      v-model="value5"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">Breakpoints displayed</span>
     <el-slider
-      v-model="value5"
+      v-model="value6"
       :step="10"
       show-stops>
     </el-slider>
@@ -83,8 +89,8 @@ The options can be discrete.
   export default {
     data() {
       return {
-        value4: 0,
+        value5: 0,
-        value5: 0
+        value6: 0
       }
     }
   }
@@ -102,7 +108,7 @@ Set value via a input box.
 <template>
   <div class="block">
     <el-slider
-      v-model="value6"
+      v-model="value7"
       show-input>
     </el-slider>
   </div>
@@ -112,7 +118,7 @@ Set value via a input box.
   export default {
     data() {
       return {
-        value6: 0
+        value7: 0
       }
     }
   }
@@ -129,7 +135,7 @@ Selecting a range of values is supported.
 <template>
   <div class="block">
     <el-slider
-      v-model="value7"
+      v-model="value8"
       range
       show-stops
       :max="10">
@@ -141,7 +147,7 @@ Selecting a range of values is supported.
   export default {
     data() {
       return {
-        value7: [4, 8]
+        value8: [4, 8]
       }
     }
   }
@@ -159,6 +165,7 @@ Selecting a range of values is supported.
 | show-input | whether to display an input box, works when `range` is false | boolean | — | false |
 | show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
 | show-stops | whether to display breakpoints | boolean | — | false |
+| show-tooltip | whether to display tooltip value | boolean | — | true |
 | range | whether to select a range | boolean | — | false |
 
 ## Events

packages/slider/src/button.vue

@@ -7,7 +7,7 @@
     :class="{ 'hover': hovering, 'dragging': dragging }"
     :style="{ left: currentPosition }"
     ref="button">
-    <el-tooltip placement="top" ref="tooltip">
+    <el-tooltip placement="top" ref="tooltip" :disabled="!showTooltip">
       <span slot="content">{{ value }}</span>
       <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
     </el-tooltip>
@@ -60,6 +60,10 @@
         return this.$parent.step;
       },
 
+      showTooltip() {
+        return this.$parent.showTooltip;
+      },
+
       precision() {
         return this.$parent.precision;
       },
@@ -76,7 +80,7 @@
     },
 
     methods: {
-      showTooltip() {
+      displayTooltip() {
         this.$refs.tooltip && (this.$refs.tooltip.showPopper = true);
       },
 
@@ -86,7 +90,7 @@
 
       handleMouseEnter() {
         this.hovering = true;
-        this.showTooltip();
+        this.displayTooltip();
       },
 
       handleMouseLeave() {
@@ -111,7 +115,7 @@
 
       onDragging(event) {
         if (this.dragging) {
-          this.showTooltip();
+          this.displayTooltip();
           this.currentX = event.clientX;
           const diff = (this.currentX - this.startX) / this.$parent.$sliderWidth * 100;
           this.newPosition = this.startPosition + diff;

packages/slider/src/main.vue

@@ -79,6 +79,10 @@
         type: Boolean,
         default: false
       },
+      showTooltip: {
+        type: Boolean,
+        default: true
+      },
       disabled: {
         type: Boolean,
         default: false

test/unit/specs/slider.spec.js

@@ -62,6 +62,25 @@ describe('Slider', () => {
     expect(slider.$refs.tooltip.showPopper).to.false;
   });
 
+  it('hide tooltip', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value" :show-tooltip="false">
+          </el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      }
+    }, true);
+    const slider = vm.$children[0].$children[0];
+    expect(slider.$refs.tooltip.disabled).to.true;
+  });
+
   it('drag', done => {
     vm = createVue({
       template: `