TASK: #105399 实现并优化switch拖动间接触发checked效果。

src/components/switch/README.md

@@ -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 开关。

src/components/switch/switch.ts

@@ -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
+      if (x < this._x) {
-        // 解决touchmove监测不到checked变化
+        // console.log('往左滑', x, this._x)
-        this.checked = true
+        this.leftx = this.leftx > this._x ? this._x : this.leftx
-      } else {
+        //到最左端后向右走 switchx 变true
-        this.base.checked = false
+        if (x > this.leftx + this.switchx) {
-        // 解决touchmove监测不到checked变化
+          this.base.checked = true
-        this.checked = false
+          // 解决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
     }
   }
 }