feat(slider): add format-tooltip prop (#468)

* feat(slider): add format-tooltip prop

* feat(slider): fix code

* Update src/slider/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - `n-rate` add `allow-half` prop.
 - `n-carousel` add `show-arrow` prop.
+- `n-slider` add `format-tooltip` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -6,6 +6,7 @@
 
 - `n-rate` 新增 `allow-half` 属性
 - `n-carousel` 新增 `show-arrow` 属性
+- `n-slider` 新增 `format-tooltip` 属性.
 
 ### Fixes
 

src/slider/demos/enUS/index.demo-entry.md

@@ -19,6 +19,7 @@ disable-tooltip
 | --- | --- | --- | --- |
 | default-value | `number \| [number, number] \| null` | `null` | Default value. |
 | disabled | `boolean` | `false` | Whether the slider is disabled. |
+| format-tooltip | `(value: number) => string \| number` | `undefined` | Format tooltip. |
 | marks | `{ [markValue: number]: string }` | `undefined` | Marks of the slider. |
 | max | `number` | `100` | Max value of the slider. |
 | min | `number` | `0` | Min value of the slider. |

src/slider/demos/zhCN/index.demo-entry.md

@@ -19,6 +19,7 @@ disable-tooltip
 | --- | --- | --- | --- |
 | default-value | `number \| [number, number] \| null` | `null` | 默认值 |
 | disabled | `boolean` | `false` | 是否禁用 |
+| format-tooltip | `(value: number) => string \| number` | `undefined` | 格式化 tooltip |
 | marks | `{ [markValue: number]: string }` | `undefined` | Slider 上的标记 |
 | max | `number` | `100` | 最大值 |
 | min | `number` | `0` | 最小值 |

src/slider/src/Slider.tsx

@@ -38,6 +38,7 @@ const sliderProps = {
   },
   marks: Object as PropType<Record<string, string>>,
   disabled: Boolean,
+  formatTooltip: Function as PropType<(value: number) => string | number>,
   min: {
     type: Number,
     default: 0
@@ -786,7 +787,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, formatTooltip } = this
     return (
       <div
         class={[
@@ -875,7 +876,9 @@ export default defineComponent({
                                 class={`${mergedClsPrefix}-slider-handle-indicator`}
                                 style={this.indicatorCssVars as CSSProperties}
                               >
-                                {this.handleValue1}
+                                {typeof formatTooltip === 'function'
+                                  ? formatTooltip(this.handleValue1)
+                                  : this.handleValue1}
                               </div>
                             ) : null
                         }}
@@ -931,7 +934,9 @@ export default defineComponent({
                                 class={`${mergedClsPrefix}-slider-handle-indicator`}
                                 style={this.indicatorCssVars as CSSProperties}
                               >
-                                {this.handleValue2}
+                                {typeof formatTooltip === 'function'
+                                  ? formatTooltip(this.handleValue2)
+                                  : this.handleValue2}
                               </div>
                             ) : null
                         }}