From 1580e570aa5fa49c0389fd879eb5e59eecf11008 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 25 Jan 2022 17:06:55 +0800 Subject: [PATCH] refactor(slider): turn into controlled component --- example/pages/slider/slider.ts | 10 ----- example/pages/slider/slider.wxml | 10 ++--- src/slider/README.md | 36 ++++++++-------- src/slider/props.ts | 10 ++++- src/slider/slider.ts | 72 ++++++++++++++++---------------- src/slider/slider.wxml | 14 +++---- src/slider/type.ts | 22 ++++++++-- 7 files changed, 89 insertions(+), 85 deletions(-) diff --git a/example/pages/slider/slider.ts b/example/pages/slider/slider.ts index 669c52379..7fa71a2c3 100644 --- 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 index cd801cf44..a1d1ec4e5 100644 --- a/example/pages/slider/slider.wxml +++ b/example/pages/slider/slider.wxml @@ -4,20 +4,16 @@ 带数值滑动选择器 - + 起始非零滑动选择器 - + 带刻度滑动选择器 区间滑动选择器 - + diff --git a/src/slider/README.md b/src/slider/README.md index c0b563f94..309d7d481 100644 --- 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` | N | -| disabled | Boolean | false | 是否禁用组件 | N | -| disabled-color | Array | ['#bbd3fb', '#dcdcdc'] | 禁用状态滑动条的颜色（已选、未选）。TS 类型：`Array` | 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 | Array` | 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` | N +disabled | Boolean | false | 是否禁用组件 | N +disabled-color | Array | ['#bbd3fb', '#dcdcdc'] | 禁用状态滑动条的颜色（已选、未选）。TS 类型：`Array` | 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 | Array` | 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 index 37cfc787a..af0988ffa 100644 --- 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 index 7263e6adf..2a5801b48 100644 --- 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,12 +307,8 @@ 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); @@ -314,12 +316,8 @@ export default class Slider extends SuperComponent { [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 index e3ec8a61f..69435744c 100644 --- 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" > @@ -60,7 +60,7 @@ @@ -77,12 +77,12 @@ ;