From 76d3800c557608d0bf7e38d5b67618f2889fed04 Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Thu, 1 Sep 2022 20:50:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?TASK:=20#105399=20=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E6=89=8B=E6=8C=87=E6=BF=80=E6=B4=BBswitch=E5=85=A8=E5=B1=8F?= =?UTF-8?q?=E8=BF=9E=E7=BB=AD=E6=BB=91=E5=8A=A8=E8=A7=A6=E5=8F=91=E5=BC=80?= =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/switch/switch-styles.ts | 52 ++++++++++++++++++++++++++ src/components/switch/switch.ts | 47 ++++++++++++++++++++--- 2 files changed, 93 insertions(+), 6 deletions(-) diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index f5a4390..8baa25c 100644 --- a/src/components/switch/switch-styles.ts +++ b/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; + } ` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 58e6ded..d4881e4 100755 --- a/src/components/switch/switch.ts +++ b/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` + (this.checked = (evt.target as HTMLInputElement).checked)} type="checkbox" class="base" id="base" switchcolor="#0265dc" /> - + ` } + 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 { From a7aa6e3d8b48ba86613b258edd9b39b941ef0bd5 Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Fri, 2 Sep 2022 14:08:02 +0800 Subject: [PATCH 2/3] =?UTF-8?q?TASK:=20#105399=20=E8=A7=A3=E5=86=B3?= =?UTF-8?q?=E4=BA=86touchmove=E4=B8=8Eicon=E6=98=BE=E7=A4=BA=E4=B8=8D?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/switch/switch.ts | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index d4881e4..c70a06f 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -34,42 +34,39 @@ export class StarSwitch extends LitElement { - (this.checked = (evt.target as HTMLInputElement).checked)} + @change=${ + (evt: Event) => + (this.checked = (evt.target as HTMLInputElement).checked) + // ,console.log( this.base.checked) + } type="checkbox" class="base" id="base" switchcolor="#0265dc" /> ` } - selectTouchMove(evt: TouchEvent) { + private selectTouchMove(evt: TouchEvent) { + // disabled不允许拖动 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', '') + this.base.checked = true + // 解决touchmove监测不到checked变化 + this.checked = true } else { - this.base.removeAttribute('checked') + this.base.checked = false + // 解决touchmove监测不到checked变化 + this.checked = false } } } - // 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 { From 12d975cb000d88bcfcd15c32290fd59d8dd1930e Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Fri, 2 Sep 2022 17:42:44 +0800 Subject: [PATCH 3/3] =?UTF-8?q?TASK:=20#105399=20icon=E5=81=9A=E6=88=90?= =?UTF-8?q?=E4=BA=86=E5=8F=AF=E9=80=89=E7=9A=84=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/li/li.ts | 3 ++ src/components/switch/switch-styles.ts | 24 ++++++++-------- src/components/switch/switch.ts | 9 ++---- src/test/panels/switch/switch.ts | 40 ++++++++++++++++++++++++++ 4 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 7ad98ae..6087eb1 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -27,6 +27,7 @@ export class StarLi extends LitElement { @property({type: String}) switchcolor = '' @property({type: Boolean}) disabled = false @property({type: Boolean}) checked = false + @property({type: Boolean}) switchicon = false @property({type: String}) size = '' getbase(): HTMLTemplateResult { @@ -232,6 +233,7 @@ export class StarLi extends LitElement { ?checked="${this.checked}" switchcolor=${this.switchcolor} size=${this.size} + ?switchicon="${this.switchicon}" > ` @@ -244,6 +246,7 @@ export class StarLi extends LitElement { ?checked="${this.checked}" switchcolor=${this.switchcolor} size=${this.size} + ?switchicon="${this.switchicon}" > `} diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index 8baa25c..8a8687c 100644 --- a/src/components/switch/switch-styles.ts +++ b/src/components/switch/switch-styles.ts @@ -18,7 +18,7 @@ export const sharedStyles: CSSResult = css` display: inline-block; position: relative; width: 46px; - height: 24px; + height: 25px; border-radius: 30px; background-color: #e9e9e9; } @@ -30,8 +30,8 @@ export const sharedStyles: CSSResult = css` /*使用伪元素生成一个按钮*/ content: ''; display: inline-block; - height: 22px; - width: 22px; + height: 23px; + width: 23px; left: 2px; top: 1px; position: absolute; @@ -46,7 +46,7 @@ export const sharedStyles: CSSResult = css` .base:checked + label::before { /*checkbox选中时按钮的样式*/ transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1); - left: 22px; + left: 21px; } /*Disabled*/ @@ -75,13 +75,13 @@ export const sharedStyles: CSSResult = css` /*checkbox选中时按钮的样式*/ left: 18px; } - :host([size='small']) .iconFalse { + :host([size='small'][switchicon]) .iconFalse { left: 24px; top: 6px; width: 6px; height: 6px; } - :host([size='small']) .iconTrue { + :host([size='small'][switchicon]) .iconTrue { left: 11px; top: 6px; height: 7px; @@ -103,13 +103,13 @@ export const sharedStyles: CSSResult = css` left: 26px; } - :host([size='large']) .iconFalse { + :host([size='large'][switchicon]) .iconFalse { left: 34px; top: 8px; width: 9px; height: 9px; } - :host([size='large']) .iconTrue { + :host([size='large'][switchicon]) .iconTrue { top: 9px; height: 9px; left: 14px; @@ -130,19 +130,19 @@ export const sharedStyles: CSSResult = css` /*checkbox选中时按钮的样式*/ left: 30px; } - :host([size='extralarge']) .iconFalse { + :host([size='extralarge'][switchicon]) .iconFalse { left: 39px; top: 9px; width: 11px; height: 11px; } - :host([size='extralarge']) .iconTrue { + :host([size='extralarge'][switchicon]) .iconTrue { top: 10px; height: 10px; left: 16px; } - .iconFalse { + :host([switchicon]) .iconFalse { position: absolute; left: 29px; top: 7px; @@ -152,7 +152,7 @@ export const sharedStyles: CSSResult = css` border-radius: 50%; border: 1px solid #b1b1b1; } - .iconTrue { + :host([switchicon]) .iconTrue { position: absolute; left: 13px; top: 7px; diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index c70a06f..07f1bce 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -16,7 +16,6 @@ export class StarSwitch extends LitElement { @property({type: Number}) x = 0 @property({type: Boolean}) disabled = false @property({type: Boolean}) checked = false - @property({type: String}) switchicon = '' @property({type: String}) get switchcolor() { return this._backgoundColor @@ -34,11 +33,8 @@ export class StarSwitch extends LitElement { - (this.checked = (evt.target as HTMLInputElement).checked) - // ,console.log( this.base.checked) - } + @change=${(evt: Event) => + (this.checked = (evt.target as HTMLInputElement).checked)} type="checkbox" class="base" id="base" @@ -68,7 +64,6 @@ export class StarSwitch extends LitElement { } } } - declare global { interface HTMLElementTagNameMap { 'star-switch': StarSwitch diff --git a/src/test/panels/switch/switch.ts b/src/test/panels/switch/switch.ts index 37af8d2..2fb1369 100644 --- a/src/test/panels/switch/switch.ts +++ b/src/test/panels/switch/switch.ts @@ -50,6 +50,46 @@ export class PanelSwitch extends LitElement {
+ + +
+ +
+ +
+ +
+ +