feat(Slider): the label attr supports function types (#3928)

anlyyao · web-flow · commit a725c0db1970 · 2025-09-24T16:34:57.000+08:00
* chore(Slider): remove useless code

* chore: unified code specifications

* feat(Slider): the label attr supports function types

* chore: update demo
diff --git a/packages/components/common/utils.wxs b/packages/components/common/utils.wxs
@@ -28,9 +28,9 @@ function isBoolean(value) {
   return typeof value === 'boolean';
 }
 
-var isNoEmptyObj = function (obj) {
+function isNoEmptyObj(obj) {
   return isObject(obj) && JSON.stringify(obj) !== '{}';
-};
+}
 
 function includes(arr, value) {
   if (!arr || !isArray(arr)) return false;
diff --git a/packages/components/slider/README.en-US.md b/packages/components/slider/README.en-US.md
@@ -11,7 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v
 colors | Array | [] | `deprecated`。Typescript：`Array<string>` | N
 disabled | Boolean | undefined | \- | N
 disabled-color | Array | [] | `deprecated`。Typescript：`Array<string>` | N
-label | String / Boolean | false | Typescript：`string \| boolean` | N
+label | String / Boolean / Function | false | Typescript：`string \| boolean` | N
 marks | Object / Array | {} | Typescript：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | \- | N
 min | Number | 0 | \- | N
diff --git a/packages/components/slider/README.md b/packages/components/slider/README.md
@@ -87,7 +87,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
 colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
 disabled | Boolean | undefined | 是否禁用组件 | N
 disabled-color | Array | [] | 已废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
-label | String / Boolean | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
+label | String / Boolean / Function | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
 marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | 滑块范围最大值 | N
 min | Number | 0 | 滑块范围最小值 | N
diff --git a/packages/components/slider/__test__/__snapshots__/demo.test.js.snap b/packages/components/slider/__test__/__snapshots__/demo.test.js.snap
@@ -40,7 +40,7 @@ exports[`Slider Slider capsule demo works fine 1`] = `
           60,
         ]
       }}"
-      label="\${value}"
+      label="\${value}%"
       range="{{true}}"
       theme="capsule"
     />
@@ -95,7 +95,7 @@ exports[`Slider Slider disabled demo works fine 1`] = `
   >
     <t-slider
       disabled="{{true}}"
-      label="\${value}"
+      label="\${value}%"
       range="{{true}}"
       showExtremeValue="{{true}}"
       value="{{
@@ -140,7 +140,7 @@ exports[`Slider Slider label demo works fine 1`] = `
     class="wrapper"
   >
     <t-slider
-      label="\${value}"
+      label="\${value}%"
       value="{{35}}"
       bind:change="handleChange"
     />
@@ -160,7 +160,7 @@ exports[`Slider Slider label demo works fine 1`] = `
           60,
         ]
       }}"
-      label="\${value}"
+      label="{{[Function]}}"
       range="{{true}}"
       showExtremeValue="{{true}}"
     />
@@ -277,7 +277,7 @@ exports[`Slider Slider vertical demo works fine 1`] = `
     class="wrapper"
   >
     <t-slider
-      label="\${singlevalue}"
+      label="\${value}%"
       value="{{35}}"
       vertical="{{true}}"
       bind:change="handleSingleChange"
@@ -322,7 +322,7 @@ exports[`Slider Slider vertical demo works fine 1`] = `
     class="wrapper"
   >
     <t-slider
-      label="\${capsuleValue}"
+      label="\${value}%"
       theme="capsule"
       value="{{35}}"
       vertical="{{true}}"
diff --git a/packages/components/slider/_example/capsule/index.wxml b/packages/components/slider/_example/capsule/index.wxml
@@ -3,7 +3,7 @@
 
   <t-slider defaultValue="{{ [40, 60] }}" range theme="capsule" />
 
-  <t-slider defaultValue="{{ [40, 60] }}" range label="${value}" theme="capsule" />
+  <t-slider defaultValue="{{ [40, 60] }}" range label="${value}%" theme="capsule" />
 
   <t-slider defaultValue="{{60}}" marks="{{marks}}" step="{{20}}" theme="capsule" />
 
diff --git a/packages/components/slider/_example/disabled/index.wxml b/packages/components/slider/_example/disabled/index.wxml
@@ -1,7 +1,7 @@
 <t-slider value="{{35}}" disabled />
 
 <view class="wrapper">
-  <t-slider show-extreme-value label="${value}" value="{{ [40, 60] }}" range disabled />
+  <t-slider show-extreme-value label="${value}%" value="{{ [40, 60] }}" range disabled />
 </view>
 
 <view class="wrapper">
diff --git a/packages/components/slider/_example/label/index.js b/packages/components/slider/_example/label/index.js
@@ -1,6 +1,10 @@
 Component({
   data: {
     value: 35,
+    label(value, position) {
+      const symbols = { min: '%', max: '%', start: '%', end: '%' };
+      return `${value}${symbols[position]}`;
+    },
   },
 
   methods: {
diff --git a/packages/components/slider/_example/label/index.wxml b/packages/components/slider/_example/label/index.wxml
@@ -1,9 +1,9 @@
 <view class="wrapper">
-  <t-slider value="{{value}}" label="${value}" bind:change="handleChange"></t-slider>
+  <t-slider value="{{value}}" label="${value}%" bind:change="handleChange"></t-slider>
 </view>
 
 <view class="demo-desc">带数值双游标滑块</view>
 
 <view class="wrapper">
-  <t-slider show-extreme-value label="${value}" default-value="{{ [40, 60] }}" range />
+  <t-slider show-extreme-value label="{{label}}" default-value="{{ [40, 60] }}" range />
 </view>
diff --git a/packages/components/slider/_example/vertical/index.wxml b/packages/components/slider/_example/vertical/index.wxml
@@ -1,20 +1,14 @@
 <view class="demo-desc">单游标垂直滑块</view>
 <view class="wrapper">
-  <t-slider vertical value="{{singlevalue}}" label="${singlevalue}" bind:change="handleSingleChange" />
+  <t-slider vertical value="{{singlevalue}}" label="${value}%" bind:change="handleSingleChange" />
 </view>
 <view class="demo-desc">带刻度的双游标垂直滑块</view>
 <view class="wrapper">
   <t-slider vertical range defaultValue="{{ [20, 60] }}" marks="{{marks}}" step="{{20}}" />
 </view>
 <view class="demo-desc">胶囊型垂直滑块</view>
 <view class="wrapper">
-  <t-slider
-    vertical
-    value="{{capsuleValue}}"
-    label="${capsuleValue}"
-    theme="capsule"
-    bind:change="handleCapsuleChange"
-  />
+  <t-slider vertical value="{{capsuleValue}}" label="${value}%" theme="capsule" bind:change="handleCapsuleChange" />
 </view>
 <view class="demo-desc">带刻度的胶囊型垂直滑块</view>
 <view class="wrapper">
diff --git a/packages/components/slider/slider.less b/packages/components/slider/slider.less
@@ -129,16 +129,6 @@
     margin-right: 32rpx;
   }
 
-  &__value--right {
-    flex-basis: 80rpx;
-
-    &__value--text {
-      margin-right: 32rpx;
-      text-align: right;
-      display: block;
-    }
-  }
-
   &__bar {
     margin: 16rpx 32rpx;
     flex: 10;
diff --git a/packages/components/slider/slider.ts b/packages/components/slider/slider.ts
@@ -4,6 +4,7 @@ import { trimSingleValue, trimValue } from './tool';
 import props from './props';
 import type { SliderValue } from './type';
 import { getRect } from '../common/utils';
+import { isString, isFunction } from '../common/validator';
 import Bus from '../common/bus';
 
 const { prefix } = config;
@@ -26,6 +27,8 @@ type dataType = {
   scaleTextArray: any[];
   _value: SliderValue;
   prefix: string;
+  realLabel: string | string[];
+  extremeLabel: string[];
   isVisibleToScreenReader: boolean;
   identifier: number[];
   __inited: boolean;
@@ -79,6 +82,8 @@ export default class Slider extends SuperComponent {
     scaleArray: [],
     scaleTextArray: [],
     prefix,
+    realLabel: '',
+    extremeLabel: [],
     isVisibleToScreenReader: false,
     identifier: [-1, -1],
     __inited: false,
@@ -95,8 +100,24 @@ export default class Slider extends SuperComponent {
     marks(val) {
       this.bus.on('initial', () => this.handleMark(val));
     },
+    label(val) {
+      this.setData({
+        isShowLabel: Boolean(val),
+      });
+    },
+    'showExtremeValue, min, max'() {
+      this.getwExtremeLabel();
+    },
   };
 
+  getwExtremeLabel() {
+    const { showExtremeValue, min, max } = this.properties;
+    if (!showExtremeValue) return;
+    this.setData({
+      extremeLabel: [this.getLabelByValue(Number(min), 'min'), this.getLabelByValue(Number(max), 'max')],
+    });
+  }
+
   lifetimes = {
     created() {
       this.bus = new Bus();
@@ -163,12 +184,41 @@ export default class Slider extends SuperComponent {
     });
   }
 
+  getLabelByValue(value: SliderValue, position?: 'start' | 'end' | 'min' | 'max') {
+    const { label } = this.properties;
+
+    if (isString(label)) {
+      let text = String(value);
+      try {
+        const rule = /\${value}%/g;
+        const enableToReplace = rule.test(label);
+        if (enableToReplace) {
+          text = label.replace(rule, String(value));
+        } else {
+          text = label;
+          throw new Error();
+        }
+      } catch (e) {
+        console.warn(`fail to parse label prop, please pass string such as '\${value}%'`);
+      }
+      return text;
+    }
+
+    if (isFunction(label)) {
+      return label(value, position);
+    }
+
+    return String(value);
+  }
+
   handlePropsChange(newValue: SliderValue) {
     const value = trimValue(newValue, this.properties);
+    const realLabel = this.getLabelByValue(value);
 
     const setValueAndTrigger = () => {
       this.setData({
         _value: value,
+        realLabel,
       });
     };
 
@@ -440,6 +490,7 @@ export default class Slider extends SuperComponent {
 
     this.setData({
       dotTopValue: [a, b],
+      realLabel: [this.getLabelByValue(a, 'start'), this.getLabelByValue(b, 'end')],
     });
 
     if (left + right <= maxRange) {
diff --git a/packages/components/slider/slider.wxml b/packages/components/slider/slider.wxml
@@ -1,13 +1,12 @@
-<wxs src="./slider.wxs" module="t" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [['top', label || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} class {{prefix}}-class {{vertical ? classPrefix + '--vertical' : ''}}"
+  class="{{_.cls(classPrefix, [['top', isShowLabel || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} class {{prefix}}-class {{vertical ? classPrefix + '--vertical' : ''}}"
 >
   <block wx:if="{{!range}}">
     <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">
-      {{ label ? t.getValue(label, min) : min}}
+      {{extremeLabel[0]}}
     </text>
     <view
       id="sliderLine"
@@ -40,13 +39,13 @@
           catch:touchcancel="onTouchEnd"
         >
           <view
-            wx:if="{{label || isVisibleToScreenReader}}"
-            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
+            wx:if="{{isShowLabel || isVisibleToScreenReader}}"
+            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}"
             aria-role="alert"
             aria-live="assertive"
             aria-hidden="{{!isVisibleToScreenReader}}"
           >
-            {{t.getValue(label, _value) || _value}}
+            {{realLabel}}
           </view>
           <view
             class="{{classPrefix}}__dot-slider"
@@ -55,22 +54,19 @@
             aria-valuemax="{{max}}"
             aria-valuemin="{{min}}"
             aria-valuenow="{{_value}}"
-            aria-valuetext="{{t.getValue(label, _value) || _value}}"
+            aria-valuetext="{{realLabel}}"
           ></view>
         </view>
       </view>
     </view>
-    <!-- <view wx:if="{{label}}" class="{{classPrefix}}__value {{classPrefix}}__value--right">
-      <text class="{{classPrefix}}__value--text"> {{t.getValue(label, _value)}}</text>
-    </view> -->
     <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">
-      {{ label ? t.getValue(label, max) : max}}
+      {{extremeLabel[1]}}
     </text>
   </block>
   <!-- range选择器自定义 -->
   <block wx:if="{{range}}">
     <view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--min">
-      {{min}}
+      {{extremeLabel[0]}}
     </view>
     <view
       id="sliderLine"
@@ -104,13 +100,13 @@
           class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"
         >
           <view
-            wx:if="{{label || isVisibleToScreenReader}}"
-            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
+            wx:if="{{isShowLabel || isVisibleToScreenReader}}"
+            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}"
             aria-role="alert"
             aria-live="assertive"
             aria-hidden="{{!isVisibleToScreenReader}}"
           >
-            {{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}
+            {{realLabel[0] || dotTopValue[0]}}
           </view>
           <view
             class="{{classPrefix}}__dot-slider"
@@ -119,7 +115,7 @@
             aria-valuemax="{{max}}"
             aria-valuemin="{{min}}"
             aria-valuenow="{{dotTopValue[0]}}"
-            aria-valuetext="{{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}"
+            aria-valuetext="{{realLabel[0] || dotTopValue[0]}}"
           ></view>
         </view>
         <view
@@ -131,13 +127,13 @@
           class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"
         >
           <view
-            wx:if="{{label || isVisibleToScreenReader}}"
-            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
+            wx:if="{{isShowLabel || isVisibleToScreenReader}}"
+            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}"
             aria-role="alert"
             aria-live="assertive"
             aria-hidden="{{!isVisibleToScreenReader}}"
           >
-            {{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}
+            {{realLabel[1] || dotTopValue[1]}}
           </view>
           <view
             class="{{classPrefix}}__dot-slider"
@@ -146,14 +142,14 @@
             aria-valuemax="{{max}}"
             aria-valuemin="{{min}}"
             aria-valuenow="{{dotTopValue[1]}}"
-            aria-valuetext="{{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}"
+            aria-valuetext="{{realLabel[1] || dotTopValue[1]}}"
           >
           </view>
         </view>
       </view>
     </view>
     <view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--max">
-      {{max}}
+      {{extremeLabel[1]}}
     </view>
   </block>
 </view>
