Merge pull request #151 from Tencent/fix/slider/controlled

refactor(slider): turn into controlled component
Tencent · Jan 27, 2022 · 2774d35 · 2774d35
2 parents bb1cf61 + 1580e57
commit 2774d35
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 85 deletions.
diff --git a/example/pages/slider/slider.ts b/example/pages/slider/slider.ts
@@ -19,14 +19,4 @@ Page({
       100: '大',
     },
   },
-  onLoad() {},
-  valueChange1(e: any) {
-    console.log('带数值滑动选择器', e.detail.value);
-  },
-  valueChange2(e: any) {
-    console.log('起始非零滑动选择器', e.detail.value);
-  },
-  valueChange3(e: any) {
-    console.log('区间滑动选择器', e.detail.value);
-  },
 });
diff --git a/example/pages/slider/slider.wxml b/example/pages/slider/slider.wxml
@@ -4,20 +4,16 @@
 <t-demo title="01 类型" desc="基础滑动选择器">
   <view class="space"><t-slider /></view>
   <view class="t-slider-wrapper-desc">带数值滑动选择器</view>
-  <view class="space-left"
-    ><t-slider value="{{value3}}" label="${value}%" bind:change="valueChange1"></t-slider
-  ></view>
+  <view class="space-left"><t-slider value="{{value3}}" label="${value}%"></t-slider></view>
 
   <view class="t-slider-wrapper-desc">起始非零滑动选择器</view>
-  <view class="space-left"
-    ><t-slider min="{{30}}" max="{{200}}" label bind:change="valueChange2"></t-slider
-  ></view>
+  <view class="space-left"><t-slider min="{{30}}" max="{{200}}" label></t-slider></view>
 
   <view class="t-slider-wrapper-desc">带刻度滑动选择器</view>
   <view class="space"><t-slider marks="{{mask3}}" step="{{50}}" value="{{50}}"></t-slider></view>
 
   <view class="t-slider-wrapper-desc">区间滑动选择器</view>
-  <t-slider range label showExtremeValue value="{{[30, 70]}}" bind:change="valueChange3"></t-slider>
+  <t-slider range label showExtremeValue value="{{[30, 70]}}"></t-slider>
 </t-demo>
 <t-demo title="02 状态" desc="滑动选择器禁用状态">
   <view class="space-container">

diff --git a/src/slider/README.md b/src/slider/README.md
@@ -26,26 +26,26 @@ isComponent: true
 ```
 
 ## API
-
 ### Slider Props
 
-| 名称               | 类型                    | 默认值                                | 说明                                                                                                                                                                                 | 必传           |
-| ------------------ | ----------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
-| colors             | Array                   | ['#0052D9', 'rgba(220, 220, 220, 1)'] | 颜色（已选择&未选择）。TS 类型：`Array<string>`                                                                                                                                      | N              |
-| disabled           | Boolean                 | false                                 | 是否禁用组件                                                                                                                                                                         | N              |
-| disabled-color     | Array                   | ['#bbd3fb', '#dcdcdc']                | 禁用状态滑动条的颜色（已选、未选）。TS 类型：`Array<string>`                                                                                                                         | N              |
-| external-classes   | Array                   | -                                     | 组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名。`['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N              |
-| label              | String / Boolean / Slot | -                                     | 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案                                                            | 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              |
-| range              | Boolean                 | false                                 | 双游标滑块                                                                                                                                                                           | N              |
-| show-extreme-value | Boolean                 | false                                 | 是否边界值                                                                                                                                                                           | N              |
-| step               | Number                  | 1                                     | 步长                                                                                                                                                                                 | N              |
-| value              | Number / Array          | -                                     | 滑块值。TS 类型：`SliderValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts)                                                  | N              |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+colors | Array | ['#0052D9', 'rgba(220, 220, 220, 1)'] | 颜色（已选择&未选择）。TS 类型：`Array<string>` | N
+disabled | Boolean | false | 是否禁用组件 | N
+disabled-color | Array | ['#bbd3fb', '#dcdcdc'] | 禁用状态滑动条的颜色（已选、未选）。TS 类型：`Array<string>` | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名。`['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
+label | String / Boolean / Slot | false | 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案 | 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
+range | Boolean | false | 双游标滑块 | N
+show-extreme-value | Boolean | false | 是否边界值 | N
+step | Number | 1 | 步长 | N
+value | Number / Array | - | 滑块值。TS 类型：`SliderValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
+defeaultValue | Number / Array | - | （非受控）滑块值。TS 类型：`SliderValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
 
 ### Slider Events
 
-| 名称   | 参数                   | 描述             |
-| ------ | ---------------------- | ---------------- |
-| change | `(value: SliderValue)` | 滑块值变化时触发 |
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: SliderValue)` | 滑块值变化时触发
diff --git a/src/slider/props.ts b/src/slider/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-24 10:58:05
  * */
 
 import { TdSliderProps } from './type';
@@ -30,8 +29,9 @@ const props: TdSliderProps = {
   label: {
     type: String,
     optionalTypes: [Boolean],
+    value: false,
   },
-  /** 刻度标记，示例：[0, 10, 40, 200] 或者 { 5:  '5¥', 10: '10%' } */
+  /** 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }` */
   marks: {
     type: Object,
     optionalTypes: [Array],
@@ -66,6 +66,12 @@ const props: TdSliderProps = {
   value: {
     type: Number,
     optionalTypes: [Array],
+    value: null,
+  },
+  /** 滑块值，非受控属性 */
+  defaultValue: {
+    type: null,
+    value: undefined,
   },
 };
 

diff --git a/src/slider/slider.ts b/src/slider/slider.ts
@@ -5,6 +5,25 @@ import props from './props';
 
 const { prefix } = config;
 const name = `${prefix}-slider`;
+
+type dataType = {
+  sliderStyles: string;
+  classPrefix: string;
+  initialLeft: number | null;
+  initialRight: number | null;
+  activeLeft: number;
+  activeRight: number;
+  maxRange: number;
+  lineLeft: number;
+  lineRight: number;
+  dotTopValue: number[];
+  blockSize: number;
+  isScale: boolean;
+  scaleArray: any[];
+  scaleTextArray: any[];
+  _value: number | number[];
+  prefix: string;
+};
 @wxComponent()
 export default class Slider extends SuperComponent {
   externalClasses = [
@@ -17,25 +36,15 @@ export default class Slider extends SuperComponent {
 
   properties = props;
 
+  controlledProps = [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ];
+
   // 组件的内部数据
-  data: {
-    sliderStyles: string;
-    classPrefix: string;
-    initialLeft: number | null;
-    initialRight: number | null;
-    activeLeft: number;
-    activeRight: number;
-    maxRange: number;
-    lineLeft: number;
-    lineRight: number;
-    dotTopValue: number[];
-    blockSize: number;
-    isScale: boolean;
-    scaleArray: any[];
-    scaleTextArray: any[];
-    _value: number | number[];
-    prefix: string;
-  } = {
+  data: dataType = {
     // 按钮样式列表
     sliderStyles: '',
     classPrefix: name,
@@ -94,7 +103,7 @@ export default class Slider extends SuperComponent {
   triggerValue(value?: number | number[]) {
     value = trimValue(value || this.data._value, this.properties);
 
-    this.triggerEvent('change', {
+    this._trigger('change', {
       value,
     });
   }
@@ -107,12 +116,9 @@ export default class Slider extends SuperComponent {
     const value = trimValue(newValue, this.properties);
 
     const setValueAndTrigger = () => {
-      this.setData(
-        {
-          _value: value,
-        },
-        this.triggerValue,
-      );
+      this.setData({
+        _value: value,
+      });
     };
 
     // 基本样式未初始化，等待初始化后在改变数据。
@@ -301,25 +307,17 @@ export default class Slider extends SuperComponent {
           // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
           const left = pageX - initialLeft - halfBlock;
           const leftValue = this.convertPosToValue(left, 0);
-          this.setData(
-            {
-              _value: [this.stepValue(leftValue), this.data._value[1]],
-            },
-            this.triggerValue,
-          );
+
+          this.triggerValue([this.stepValue(leftValue), this.data._value[1]]);
         } else {
           const right = -(pageX - initialRight) - halfBlock;
           const rightValue = this.convertPosToValue(right, 1);
           const newValue = trimValue(
             [this.data._value[0], this.stepValue(rightValue)],
             this.properties,
           );
-          this.setData(
-            {
-              _value: newValue,
-            },
-            this.triggerValue,
-          );
+
+          this.triggerValue(newValue);
         }
       });
     });

diff --git a/src/slider/slider.wxml b/src/slider/slider.wxml
@@ -11,7 +11,7 @@
         id="sliderLine"
         class="{{classPrefix}}__main {{prefix}}-class-bar"
         style="background-color: {{disabled ? disabledColor[1] : colors[1]}};"
-        bindtap="onSingleLineTap"
+        bind:tap="onSingleLineTap"
       >
         <block wx:if="{{isScale}}">
           <view
@@ -29,13 +29,13 @@
         <view
           class="{{classPrefix}}__line {{prefix}}-class-bar-active"
           style="background-color: {{disabled ? disabledColor[0] : colors[0]}}; left: {{lineLeft}}px; width: {{lineBarWidth}};"
-          bindtap="onSingleLineTap"
+          bind:tap="onSingleLineTap"
         >
           <view
             id="singleDot"
             class="{{classPrefix}}__dot {{prefix}}-class-cursor"
             style="left: {{activeLeft}}px"
-            bindtouchmove="onSingleTouchMove"
+            bind:touchmove="onSingleTouchMove"
             bind:touchend="onTouchEnd"
             bind:touchcancel="onTouchEnd"
           />
@@ -60,7 +60,7 @@
       </view>
       <view
         id="sliderLine"
-        bindtap="onLineTap"
+        bind:tap="onLineTap"
         class="{{classPrefix}}__bar {{prefix}}-class-bar"
         style="background-color: {{disabled ? disabledColor[1] : colors[1]}};"
       >
@@ -77,12 +77,12 @@
         </block>
         <view
           class="{{classPrefix}}__line {{prefix}}-class-bar-active"
-          bindtap="onLineTap"
+          bind:tap="onLineTap"
           style="background-color: {{disabled ? disabledColor[0] : colors[0]}}; left: {{lineLeft}}px; right: {{lineRight}}px;"
         />
         <view
           id="leftDot"
-          bindtouchmove="onTouchMoveLeft"
+          bind:touchmove="onTouchMoveLeft"
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"
           class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"
@@ -94,7 +94,7 @@
         </view>
         <view
           id="rightDot"
-          bindtouchmove="onTouchMoveRight"
+          bind:touchmove="onTouchMoveRight"
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"
           class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"

diff --git a/src/slider/type.ts b/src/slider/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-24 10:58:05
  * */
 
 export interface TdSliderProps {
@@ -38,11 +37,18 @@ export interface TdSliderProps {
    */
   externalClasses?: {
     type: ArrayConstructor;
-    value?: ['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor'];
+    value?: [
+      't-class',
+      't-class-bar',
+      't-class-bar-active',
+      't-class-bar-disabled',
+      't-class-cursor',
+    ];
     required?: boolean;
   };
   /**
    * 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案
+   * @default false
    */
   label?: {
     type: StringConstructor;
@@ -51,7 +57,7 @@ export interface TdSliderProps {
     required?: boolean;
   };
   /**
-   * 刻度标记，示例：[0, 10, 40, 200] 或者 { 5:  '5¥', 10: '10%' }
+   * 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`
    * @default {}
    */
   marks?: {
@@ -114,6 +120,14 @@ export interface TdSliderProps {
     value?: SliderValue;
     required?: boolean;
   };
-};
+  /**
+   * 滑块值，非受控属性
+   */
+  defaultValue?: {
+    type: NumberConstructor;
+    value?: SliderValue;
+    required?: boolean;
+  };
+}
 
 export type SliderValue = number | Array<number>;