From 7018a275d0ec7c2b290dcd7cc87548d60018e496 Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Tue, 27 Sep 2022 16:47:58 +0800 Subject: [PATCH] =?UTF-8?q?TASK:=20#111576=20=E6=9B=B4=E6=96=B0slider?= =?UTF-8?q?=E4=B8=AD=E5=A1=AB=E5=85=85cover=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/slider/README.md | 27 +++++++++-------- src/components/slider/slider.ts | 28 ++++++++++++++---- src/test/panels/slider/slider.ts | 50 ++++++++++++++++---------------- 3 files changed, 62 insertions(+), 43 deletions(-) diff --git a/src/components/slider/README.md b/src/components/slider/README.md index d3880e3..b949e99 100644 --- a/src/components/slider/README.md +++ b/src/components/slider/README.md @@ -13,37 +13,40 @@ ``` -2. `coverWidth` --- 初始填充 +2. `cover` --- 初始填充
+ `cover="50"` 和 `cover="50%"`都表示初始填充音量条的50%
+ `cover="150px"` 表示准确的填充长度
``` - - + + + ``` -3. `disabled` --- 禁用滑块 +1. `disabled` --- 禁用滑块 ``` - + ``` 4. `unfilled` --- 滑块中小球左侧不进行填充 ``` - - + + ``` 5. `Tick` --- 分格滑块(默认是 unfilled 属性) min=0,mix=100，按照需求填写 step(每一格）的大小
example :
step="25" 表示把 slider 分为 4 块
- coverWidth="40%" 表示初始小球落在第二格上 + cover="40%" 表示初始小球落在第二格上 ``` - + ``` 6. `vertical` --- 垂直 slider @@ -51,7 +54,7 @@ ``` - + ``` 7. `vHeight="300px"`代表垂直 slider 的长度 默认`vHeight="200px"` @@ -59,7 +62,7 @@ ``` - + ``` 8. 左侧图标|行滑块|右侧图标 @@ -81,7 +84,7 @@ - `slot="icon"` 表示图标在 slider 下部 ``` - +
``` diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts index ca7ec19..11db19d 100644 --- a/src/components/slider/slider.ts +++ b/src/components/slider/slider.ts @@ -2,9 +2,18 @@ import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit' import {customElement, property, query} from 'lit/decorators.js' import {sharedStyles} from './slider-styles.js' +function getType(str: string) { + if (/^\d*px$/.test(str)) { + return 'static' + } else if (/^\d*%?$/.test(str)) { + return 'percent' + } else { + return 'invalid' + } +} @customElement('star-slider') export class StarSlider extends LitElement { - _coverWidth: string = '' + _cover: string = '0' _vHeight: string = '' public static override get styles(): CSSResultArray { return [sharedStyles] @@ -36,13 +45,20 @@ export class StarSlider extends LitElement { @property({type: String}) endValue = '' @property({type: String}) step = '' @property({type: String}) - get coverWidth() { - return this._coverWidth + get cover() { + return this._cover } - set coverWidth(value: string) { + set cover(value: string) { + const type = getType(value) + if (type == 'percent' && !isNaN(+value)) { + value += '%' + } else if (type == 'invalid') { + value = this._cover + return + } this.style.setProperty('--cover-width', value) - this._coverWidth = value - this.style.setProperty('--dot-move', this._coverWidth) + this._cover = value + this.style.setProperty('--dot-move', this._cover) } @property({type: String}) get vHeight() { diff --git a/src/test/panels/slider/slider.ts b/src/test/panels/slider/slider.ts index a6b9177..5d9cc62 100644 --- a/src/test/panels/slider/slider.ts +++ b/src/test/panels/slider/slider.ts @@ -18,19 +18,19 @@ export class PanelSlider extends LitElement {

vertical

- +
- +
- +
@@ -53,28 +53,28 @@ export class PanelSlider extends LitElement {
-

coverWidth - 初始覆盖长度

+

cover - 初始覆盖长度

- +
- +

disabled

- +
- +

unfilled - 无覆盖

- +
- +

tick - 跳格滑动

step="10"
@@ -83,27 +83,27 @@ export class PanelSlider extends LitElement {
step="20"
- +
step="50"
- +
step="25"
- +
@@ -111,29 +111,29 @@ export class PanelSlider extends LitElement {

-

coverWidth - 初始覆盖长度

- +

cover - 初始覆盖长度

+

- +

disabled

- - + +

unfilled - 无覆盖

- - + +

tick

step="10"
step="20"
- +
step="50"
- +
step="25"
- +