TASK: #105399 实现手指激活switch全屏连续滑动触发开关功能

src/components/switch/switch-styles.ts

@@ -75,6 +75,17 @@ export const sharedStyles: CSSResult = css`
     /*checkbox选中时按钮的样式*/
     left: 18px;
   }
+  :host([size='small']) .iconFalse {
+    left: 24px;
+    top: 6px;
+    width: 6px;
+    height: 6px;
+  }
+  :host([size='small']) .iconTrue {
+    left: 11px;
+    top: 6px;
+    height: 7px;
+  }
 
   /*Large*/
   :host([size='large']) label {
@@ -92,6 +103,18 @@ export const sharedStyles: CSSResult = css`
     left: 26px;
   }
 
+  :host([size='large']) .iconFalse {
+    left: 34px;
+    top: 8px;
+    width: 9px;
+    height: 9px;
+  }
+  :host([size='large']) .iconTrue {
+    top: 9px;
+    height: 9px;
+    left: 14px;
+  }
+
   /*ExtraLarge*/
   :host([size='extralarge']) label {
     width: 62px;
@@ -107,4 +130,33 @@ export const sharedStyles: CSSResult = css`
     /*checkbox选中时按钮的样式*/
     left: 30px;
   }
+  :host([size='extralarge']) .iconFalse {
+    left: 39px;
+    top: 9px;
+    width: 11px;
+    height: 11px;
+  }
+  :host([size='extralarge']) .iconTrue {
+    top: 10px;
+    height: 10px;
+    left: 16px;
+  }
+
+  .iconFalse {
+    position: absolute;
+    left: 29px;
+    top: 7px;
+    width: 8px;
+    height: 8px;
+    background-color: #e9e9e9;
+    border-radius: 50%;
+    border: 1px solid #b1b1b1;
+  }
+  .iconTrue {
+    position: absolute;
+    left: 13px;
+    top: 7px;
+    height: 8px;
+    border-left: 1px solid #fff;
+  }
 `

src/components/switch/switch.ts

@@ -1,6 +1,7 @@
 import {html, LitElement, CSSResultArray} from 'lit'
-import {customElement, property} from 'lit/decorators.js'
+import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './switch-styles'
+// import {classMap} from 'lit/directives/class-map.js'
 
 @customElement('star-switch')
 export class StarSwitch extends LitElement {
@@ -9,32 +10,66 @@ export class StarSwitch extends LitElement {
     return [sharedStyles]
   }
 
-  // @property({type: String}) switchtype = ''
+  @property({type: Number}) right = 0
+  @property({type: Number}) left = 0
+  @property({type: Number}) switchx = 0
+  @property({type: Number}) x = 0
   @property({type: Boolean}) disabled = false
   @property({type: Boolean}) checked = false
+  @property({type: String}) switchicon = ''
   @property({type: String})
-  get switchColor() {
+  get switchcolor() {
     return this._backgoundColor
   }
-
-  set switchColor(value: string) {
+  set switchcolor(value: string) {
     this.style.setProperty('--background-color', value)
     this._backgoundColor = value
   }
 
+  @query('#switchBall') switchBall!: HTMLLabelElement
+  @query('#base') base!: HTMLInputElement
+
   render() {
     return html`
       <input
         ?disabled="${this.disabled}"
         ?checked="${this.checked}"
+        @change=${(evt: Event) =>
+          (this.checked = (evt.target as HTMLInputElement).checked)}
         type="checkbox"
         class="base"
         id="base"
         switchcolor="#0265dc"
       />
-      <label for="base"></label>
+      <label id="switchBall" for="base" @touchmove=${this.selectTouchMove}>
+        <!-- <div class="${this.checked ? 'iconTrue' : 'iconFalse '}"></div> -->
+      </label>
     `
   }
+  selectTouchMove(evt: TouchEvent) {
+    if (!this.disabled) {
+      let right = this.switchBall.getBoundingClientRect().right
+      let left = this.switchBall.getBoundingClientRect().left
+      let switchx = (right - left) / 2 + left
+      let x = evt.touches[0].clientX
+      if (x >= switchx) {
+        this.base.setAttribute('checked', '')
+      } else {
+        this.base.removeAttribute('checked')
+      }
+    }
+  }
+  // private touchMove(evt: TouchEvent) {
+  //   let right = this.switchBall.getBoundingClientRect().right
+  //   let left = this.switchBall.getBoundingClientRect().left
+  //   let switchx = (right - left) / 2 + left
+  //   let x = evt.touches[0].clientX
+  //   if (x >= switchx) {
+  //     this.base.setAttribute('checked', '')
+  //   } else {
+  //     this.base.removeAttribute('checked')
+  //   }
+  // }
 }
 
 declare global {