TASK: #105399 实现并优化switch拖动间接触发checked效果。
This commit is contained in:
duanzhijiang
parent
12d975cb00
commit
409142a38a
|
|
@ -2,17 +2,28 @@
|
|||
|
||||
星光 Web 组件 --- Switch 组件（8 月 29 日）
|
||||
|
||||
`star-switch` 组件包含**四种**互相独立的属性，介绍如下：
|
||||
`star-switch` 组件包含**五种**互相独立的属性，介绍如下：
|
||||
|
||||
1. switchcolor : 控制 switch 的选中背景颜色，默认为蓝色`#0265dc`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
<hr />
|
||||
<star-switch switchcolor="#4cd964"></star-switch>
|
||||
<star-switch switchcolor="#4cd964">ios绿</star-switch>
|
||||
<star-switch switchcolor="#ff3b30">ios红</star-switch>
|
||||
```
|
||||
|
||||
2. checked : 用于选择对应 switch 首次加载时是否被选中，默认为`false`。
|
||||
2. switchicon : 用于控制内含文本，默认为`false`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
<hr />
|
||||
<star-switch switchicon></star-switch>
|
||||
<hr />
|
||||
<star-switch checked switchicon></star-switch>
|
||||
```
|
||||
|
||||
3. checked : 用于选择对应 switch 首次加载时是否被选中，默认为`false`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
|
|
@ -22,7 +33,7 @@
|
|||
<star-switch checked switchcolor="#4cd964"></star-switch>
|
||||
```
|
||||
|
||||
3. disabled : 控制 switch 是否**禁用**状态，默认为`false`。
|
||||
4. disabled : 控制 switch 是否**禁用**状态，默认为`false`。
|
||||
|
||||
```
|
||||
<star-switch></star-switch>
|
||||
|
|
@ -32,7 +43,7 @@
|
|||
<star-switch disabled checked></star-switch>
|
||||
```
|
||||
|
||||
4. size : 控制 switch 的大小，包括 small、medium、large 和 extralarge，默认为 `medium` 。
|
||||
5. size : 控制 switch 的大小，包括 small、medium、large 和 extralarge，默认为 `medium` 。
|
||||
|
||||
```
|
||||
<star-switch size="small" switchcolor="#4cd964"></star-switch>
|
||||
|
|
@ -45,3 +56,7 @@
|
|||
<hr />
|
||||
<star-switch size="extralarge" disabled checked></star-switch>
|
||||
```
|
||||
|
||||
该组件支持焦点选中，且可以在焦点选中后任意拖动。
|
||||
|
||||
拖动后可间接触发 checked 开关。
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ export class StarSwitch extends LitElement {
|
|||
@property({type: Number}) right = 0
|
||||
@property({type: Number}) left = 0
|
||||
@property({type: Number}) switchx = 0
|
||||
@property({type: Number}) startx = 0
|
||||
@property({type: Number}) _x = 0
|
||||
@property({type: Number}) rightx = 0
|
||||
@property({type: Number}) leftx = 10000
|
||||
@property({type: Number}) x = 0
|
||||
@property({type: Boolean}) disabled = false
|
||||
@property({type: Boolean}) checked = false
|
||||
|
|
@ -40,27 +44,87 @@ export class StarSwitch extends LitElement {
|
|||
id="base"
|
||||
switchcolor="#0265dc"
|
||||
/>
|
||||
<label id="switchBall" for="base" @touchmove=${this.selectTouchMove}>
|
||||
<label
|
||||
id="switchBall"
|
||||
for="base"
|
||||
@touchstart=${this.touchStart}
|
||||
@touchend=${this.touchEnd}
|
||||
@touchmove=${this.selectTouchMove}
|
||||
>
|
||||
<div class="${this.checked ? 'iconTrue' : 'iconFalse '}"></div>
|
||||
</label>
|
||||
`
|
||||
}
|
||||
private touchStart(evt: TouchEvent) {
|
||||
console.log('##')
|
||||
this.startx = evt.touches[0].clientX
|
||||
this._x = this.startx
|
||||
}
|
||||
private touchEnd(evt: TouchEvent) {
|
||||
this.rightx = 0
|
||||
this.leftx = 10000
|
||||
this.startx = 0
|
||||
}
|
||||
private selectTouchMove(evt: TouchEvent) {
|
||||
evt.preventDefault()
|
||||
// disabled不允许拖动
|
||||
if (!this.disabled) {
|
||||
let right = this.switchBall.getBoundingClientRect().right
|
||||
let left = this.switchBall.getBoundingClientRect().left
|
||||
let switchx = (right - left) / 2 + left
|
||||
let switchx = (right - left) / 2
|
||||
let x = evt.touches[0].clientX
|
||||
if (x >= switchx) {
|
||||
this.base.checked = true
|
||||
// 解决touchmove监测不到checked变化
|
||||
this.checked = true
|
||||
} else {
|
||||
this.base.checked = false
|
||||
// 解决touchmove监测不到checked变化
|
||||
this.checked = false
|
||||
// 向左滑
|
||||
if (x < this._x) {
|
||||
// console.log('往左滑', x, this._x)
|
||||
this.leftx = this.leftx > this._x ? this._x : this.leftx
|
||||
//到最左端后向右走 switchx 变true
|
||||
if (x > this.leftx + this.switchx) {
|
||||
this.base.checked = true
|
||||
// 解决touchmove监测不到checked变化
|
||||
this.checked = true
|
||||
this.leftx = 10000
|
||||
}
|
||||
|
||||
//初始的开关阈值调节
|
||||
if (x > left && x < right) {
|
||||
if (this.startx - this.leftx > switchx) {
|
||||
this.base.checked = false
|
||||
this.checked = false
|
||||
}
|
||||
}
|
||||
//有rightx的情况下向左移动 switch 变false
|
||||
if (x < this.rightx - switchx) {
|
||||
this.base.checked = false
|
||||
this.checked = false
|
||||
}
|
||||
} else if (x > this._x) {
|
||||
//向右滑
|
||||
// console.log('往右滑', x, this._x)
|
||||
this.rightx = this.rightx > this._x ? this.rightx : this._x
|
||||
//到最右端后向左移动 switch 变false
|
||||
if (x < this.rightx - this.switchx) {
|
||||
this.base.checked = false
|
||||
this.checked = false
|
||||
this.rightx = 0
|
||||
}
|
||||
|
||||
//初始的开关阈值调节
|
||||
if (x > left && x < right) {
|
||||
if (this.rightx - this.startx > switchx) {
|
||||
this.base.checked = true
|
||||
this.checked = true
|
||||
}
|
||||
}
|
||||
|
||||
//到最左端开始向右走 switchx 变true
|
||||
if (x - this.leftx > switchx) {
|
||||
this.base.checked = true
|
||||
this.checked = true
|
||||
this.leftx = 10000
|
||||
}
|
||||
}
|
||||
//更新_x的值，保持_x在x后面
|
||||
this._x = x
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue