diff --git a/src/common/bus.ts b/src/common/bus.ts index 46402dfec..216a4a647 100644 --- a/src/common/bus.ts +++ b/src/common/bus.ts @@ -1,11 +1,17 @@ export default class Bus { listeners: Map; + emited: Set; constructor() { this.listeners = new Map(); + this.emited = new Set(); } on(evtName: string, listener) { + if (this.emited.has(evtName)) { + listener(); + return; + } const target = this.listeners.get(evtName) || []; target.push(listener); @@ -18,6 +24,7 @@ export default class Bus { if (listeners) { listeners.forEach((func) => func()); + this.emited.add(evtName); } } } diff --git a/src/slider/README.md b/src/slider/README.md index 85f985c57..832b06415 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -80,4 +80,14 @@ dragstart | \- | 开始拖动时触发 ## FAQ -当 slider 外层使用 `hidden` 包裹,需要在 `hidden = false` 时,重新调用组件的 `getInitialStyle` 方法,才能正常渲染。 \ No newline at end of file +当 slider 外层使用 `hidden` 包裹,需要在 `hidden = false` 时,重新调用组件的 `init` 方法,才能正常渲染。如下: + +```html + +``` + +```js +const $slider = this.selectComponent('#slider'); + +$slider.init(); +``` \ No newline at end of file diff --git a/src/slider/slider.ts b/src/slider/slider.ts index 32202521d..e78aa1c20 100644 --- a/src/slider/slider.ts +++ b/src/slider/slider.ts @@ -79,33 +79,11 @@ export default class Slider extends SuperComponent { this.handlePropsChange(newValue); }, _value(newValue: SliderValue) { - const { min, max, range } = this.properties; - const { maxRange } = this.data; - - if (range) { - const left = (maxRange * (newValue[0] - Number(min))) / (Number(max) - Number(min)); - const right = (maxRange * (Number(max) - newValue[1])) / (Number(max) - Number(min)); - // 因为要计算点相对于线的绝对定位,所以要取整条线的长度而非可滑动的范围 - this.setLineStyle(left, right); - } else { - this.setSingleBarWidth(newValue as number); - } - - this.setData({ - isVisibleToScreenReader: true, - }); - setTimeout(() => { - this.setData({ - isVisibleToScreenReader: false, - }); - }, 2e3); + this.bus.on('initial', () => this.renderLine(newValue)); + this.toggleA11yTips(); }, marks(val) { - if (this.data.initialLeft != null) { - this.handleMark(val); - } else { - this.bus.on('initial', () => this.handleMark(val)); - } + this.bus.on('initial', () => this.handleMark(val)); }, }; @@ -116,10 +94,35 @@ export default class Slider extends SuperComponent { attached() { const { value } = this.properties; if (!value) this.handlePropsChange(0); - this.getInitialStyle(); + this.init(); }, }; + toggleA11yTips() { + this.setData({ + isVisibleToScreenReader: true, + }); + setTimeout(() => { + this.setData({ + isVisibleToScreenReader: false, + }); + }, 2000); + } + + renderLine(val) { + const { min, max, range } = this.properties; + const { maxRange } = this.data; + + if (range) { + const left = (maxRange * (val[0] - Number(min))) / (Number(max) - Number(min)); + const right = (maxRange * (Number(max) - val[1])) / (Number(max) - Number(min)); + // 因为要计算点相对于线的绝对定位,所以要取整条线的长度而非可滑动的范围 + this.setLineStyle(left, right); + } else { + this.setSingleBarWidth(val as number); + } + } + triggerValue(value?: SliderValue) { if (this.preval === value) return; this.preval = value; @@ -139,7 +142,7 @@ export default class Slider extends SuperComponent { // 基本样式未初始化,等待初始化后在改变数据。 if (this.data.maxRange === 0) { - this.getInitialStyle().then(setValueAndTrigger); + this.init().then(setValueAndTrigger); return; } @@ -189,7 +192,7 @@ export default class Slider extends SuperComponent { }); } - async getInitialStyle() { + async init() { const line: boundingClientRect = await getRect(this, '#sliderLine'); const { blockSize } = this.data; const { theme } = this.properties; @@ -198,6 +201,8 @@ export default class Slider extends SuperComponent { let initialLeft = line.left; let initialRight = line.right; + if (initialLeft === 0 && initialRight === 0) return; + if ((theme as any) === 'capsule') { maxRange = maxRange - Number(blockSize) - 6; // 6 是边框宽度 initialLeft -= halfBlock;