Slider: feature - add format-tooltip prop (#3657)

* Slider: add format-tooltip prop

* Docs: update slider.md

* Docs: update slider.md

examples/docs/en-US/slider.md

@@ -5,12 +5,18 @@
         value1: 0,
         value2: 50,
         value3: 36,
-        value4: 42,
-        value5: 0,
+        value4: 48,
+        value5: 42,
         value6: 0,
         value7: 0,
-        value8: [4, 8]
+        value8: 0,
+        value9: [4, 8]
       };
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
     }
   }
 </script>
@@ -39,9 +45,13 @@ The current value is displayed when the slider is being dragged.
     <span class="demonstration">Hide Tooltip</span>
     <el-slider v-model="value3" :show-tooltip="false"></el-slider>
   </div>
+  <div class="block">
+    <span class="demonstration">Format Tooltip</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
+  </div>
   <div class="block">
     <span class="demonstration">Disabled</span>
-    <el-slider v-model="value4" disabled></el-slider>
+    <el-slider v-model="value5" disabled></el-slider>
   </div>
 </template>
 
@@ -52,7 +62,13 @@ The current value is displayed when the slider is being dragged.
         value1: 0,
         value2: 50,
         value3: 36,
-        value4: 42
+        value4: 48,
+        value5: 42
+      }
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
       }
     }
   }
@@ -71,14 +87,14 @@ The options can be discrete.
   <div class="block">
     <span class="demonstration">Breakpoints not displayed</span>
     <el-slider
-      v-model="value5"
+      v-model="value6"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">Breakpoints displayed</span>
     <el-slider
-      v-model="value6"
+      v-model="value7"
       :step="10"
       show-stops>
     </el-slider>
@@ -89,8 +105,8 @@ The options can be discrete.
   export default {
     data() {
       return {
-        value5: 0,
-        value6: 0
+        value6: 0,
+        value7: 0
       }
     }
   }
@@ -108,7 +124,7 @@ Set value via a input box.
 <template>
   <div class="block">
     <el-slider
-      v-model="value7"
+      v-model="value8"
       show-input>
     </el-slider>
   </div>
@@ -118,7 +134,7 @@ Set value via a input box.
   export default {
     data() {
       return {
-        value7: 0
+        value8: 0
       }
     }
   }
@@ -135,7 +151,7 @@ Selecting a range of values is supported.
 <template>
   <div class="block">
     <el-slider
-      v-model="value8"
+      v-model="value9"
       range
       show-stops
       :max="10">
@@ -147,7 +163,7 @@ Selecting a range of values is supported.
   export default {
     data() {
       return {
-        value8: [4, 8]
+        value9: [4, 8]
       }
     }
   }
@@ -166,6 +182,7 @@ Selecting a range of values is supported.
 | 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 |
+| format-tooltip | format to display tooltip value | Function(value) | — | — |
 | range | whether to select a range | boolean | — | false |
 
 ## Events

examples/docs/zh-CN/slider.md

@@ -5,12 +5,18 @@
         value1: 0,
         value2: 50,
         value3: 36,
-        value4: 42,
-        value5: 0,
+        value4: 48,
+        value5: 42,
         value6: 0,
         value7: 0,
-        value8: [4, 8]
+        value8: 0,
+        value9: [4, 8]
       };
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
     }
   }
 </script>
@@ -65,9 +71,13 @@
     <span class="demonstration">隐藏 Tooltip</span>
     <el-slider v-model="value3" :show-tooltip="false"></el-slider>
   </div>
+  <div class="block">
+    <span class="demonstration">格式化 Tooltip</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
+  </div>
   <div class="block">
     <span class="demonstration">禁用</span>
-    <el-slider v-model="value4" disabled></el-slider>
+    <el-slider v-model="value5" disabled></el-slider>
   </div>
 </template>
 
@@ -78,7 +88,13 @@
         value1: 0,
         value2: 50,
         value3: 36,
-        value4: 42
+        value4: 48,
+        value5: 42
+      }
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
       }
     }
   }
@@ -96,14 +112,14 @@
   <div class="block">
     <span class="demonstration">不显示间断点</span>
     <el-slider
-      v-model="value5"
+      v-model="value6"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">显示间断点</span>
     <el-slider
-      v-model="value6"
+      v-model="value7"
       :step="10"
       show-stops>
     </el-slider>
@@ -114,8 +130,8 @@
   export default {
     data() {
       return {
-        value5: 0,
-        value6: 0
+        value6: 0,
+        value7: 0
       }
     }
   }
@@ -132,7 +148,7 @@
 <template>
   <div class="block">
     <el-slider
-      v-model="value7"
+      v-model="value8"
       show-input>
     </el-slider>
   </div>
@@ -142,7 +158,7 @@
   export default {
     data() {
       return {
-        value7: 0
+        value8: 0
       }
     }
   }
@@ -159,7 +175,7 @@
 <template>
   <div class="block">
     <el-slider
-      v-model="value8"
+      v-model="value9"
       range
       show-stops
       :max="10">
@@ -171,7 +187,7 @@
   export default {
     data() {
       return {
-        value8: [4, 8]
+        value9: [4, 8]
       }
     }
   }
@@ -190,6 +206,7 @@
 | show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true|
 | show-stops | 是否显示间断点 | boolean | — | false |
 | show-tooltip | 是否显示 tooltip | boolean | — | true |
+| format-tooltip | 格式化 tooltip message | Function(value) | — | — |
 | range | 是否为范围选择 | boolean | — | false |
 
 ### Events

packages/slider/src/button.vue

@@ -8,7 +8,7 @@
     :style="{ left: currentPosition }"
     ref="button">
     <el-tooltip placement="top" ref="tooltip" :disabled="!showTooltip">
-      <span slot="content">{{ value }}</span>
+      <span slot="content">{{ formatValue }}</span>
       <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
     </el-tooltip>
   </div>
@@ -70,6 +70,14 @@
 
       currentPosition() {
         return `${ (this.value - this.min) / (this.max - this.min) * 100 }%`;
+      },
+
+      enableFormat() {
+        return this.$parent.formatTooltip instanceof Function;
+      },
+
+      formatValue() {
+        return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;
       }
     },
 
@@ -159,4 +167,3 @@
     }
   };
 </script>
-

packages/slider/src/main.vue

@@ -83,6 +83,7 @@
         type: Boolean,
         default: true
       },
+      formatTooltip: Function,
       disabled: {
         type: Boolean,
         default: false

test/unit/specs/slider.spec.js

@@ -81,6 +81,33 @@ describe('Slider', () => {
     expect(slider.$refs.tooltip.disabled).to.true;
   });
 
+  it('format tooltip', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value" :format-tooltip="formatTooltip">
+          </el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      },
+      methods: {
+        formatTooltip(val) {
+          return '$' + val;
+        }
+      }
+    }, true);
+    const slider = vm.$children[0].$children[0];
+    expect(slider.formatTooltip).to.function;
+    vm.$nextTick(() => {
+      expect(slider.formatValue).to.equal('$0');
+    });
+  });
+
   it('drag', done => {
     vm = createVue({
       template: `