From 6f17d54a7c00c7531ed940daea02e0b433711d7f Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Sat, 26 Nov 2022 18:53:51 +0800 Subject: [PATCH] =?UTF-8?q?TASK:=20#124025=20slider=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/auto-px-style.ts | 2 + src/components/slider/slider-styles.ts | 63 +++++++++++--------------- src/components/slider/slider.ts | 53 ++++++++++------------ src/test/panels/slider/slider.ts | 53 +++++++++++----------- 4 files changed, 79 insertions(+), 92 deletions(-) diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index 308358e..f2c833e 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -75,6 +75,7 @@ export const autoPxStyle: CSSResult = css` --auto-112px: calc(112px / var(--hostDevicePixelRatio)); --auto-116px: calc(116px / var(--hostDevicePixelRatio)); --auto-118px: calc(118px / var(--hostDevicePixelRatio)); + --auto-120px: calc(120px / var(--hostDevicePixelRatio)); --auto-124px: calc(124px / var(--hostDevicePixelRatio)); --auto-128px: calc(128px / var(--hostDevicePixelRatio)); --auto-129px: calc(129px / var(--hostDevicePixelRatio)); @@ -93,6 +94,7 @@ export const autoPxStyle: CSSResult = css` --auto-202px: calc(202px / var(--hostDevicePixelRatio)); --auto-206px: calc(206px / var(--hostDevicePixelRatio)); --auto-208px: calc(208px / var(--hostDevicePixelRatio)); + --auto-220px: calc(220px / var(--hostDevicePixelRatio)); --auto-222px: calc(222px / var(--hostDevicePixelRatio)); --auto-254px: calc(254px / var(--hostDevicePixelRatio)); --auto-260px: calc(260px / var(--hostDevicePixelRatio)); diff --git a/src/components/slider/slider-styles.ts b/src/components/slider/slider-styles.ts index fc2f19a..c0f50da 100644 --- a/src/components/slider/slider-styles.ts +++ b/src/components/slider/slider-styles.ts @@ -1,19 +1,18 @@ import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` :host { - --cover-width: 0px; - --dot-move: 0px; - --vWidth: 8px; - --vHeight: 200px; + --cover-width: 0; + --dot-move: 0; + --vWidth: var(--auto-8px); + --vHeight: var(--auto-200px); } .content { - height: 2px; - margin: 0px 50px; + height: var(--auto-6px); + margin: 0 var(--auto-120px); position: relative; top: 50%; transform: translateY(-50%); - padding: 8px; - border-radius: 5px; + padding: var(--auto-10px) 0; } .v-content { position: relative; @@ -39,12 +38,9 @@ export const sharedStyles: CSSResult = css` .sliderBar { position: absolute; width: 100%; - height: 6px; - left: 0px; - right: 0px; - top: calc(50% - 6px / 2); + height: var(--auto-6px); background: rgba(0, 0, 0, 0.08); - border-radius: 8px; + border-radius: var(--auto-5px); } .v-progress { position: absolute; @@ -56,21 +52,16 @@ export const sharedStyles: CSSResult = css` background: #404040; } .progress { - position: absolute; width: var(--cover-width); - height: 6px; - left: 0px; - right: 0px; - top: calc(50% - 6px / 2); + height: var(--auto-6px); background: #4d4d4d; - border-radius: 5px 0 0 5px; } .dot { position: absolute; left: var(--dot-move); - width: 20px; - height: 20px; - top: calc(50% - 20px / 2); + width: var(--auto-26px); + height: var(--auto-26px); + top: calc(50% - var(--auto-26px) / 2); background: #544f4f; border-radius: 50%; z-index: 1; @@ -82,8 +73,8 @@ export const sharedStyles: CSSResult = css` } p { position: absolute; - right: 5px; - top: 1px; + right: var(--auto-5px); + top: var(--auto-1px); } :host([disabled]) .progress { background: #c0c0c0; @@ -100,7 +91,7 @@ export const sharedStyles: CSSResult = css` :host([tick]) .sliderBar { background: #c0c0c0; border-radius: 0 0 0 0; - height: 4px; + height: var(--auto-4px); } :host([disabled]) .dot { background: #c0c0c0; @@ -115,19 +106,19 @@ export const sharedStyles: CSSResult = css` position: absolute; left: calc(var(--i) * 100%); top: calc(50% - 10px / 2); - width: 3px; - height: 10px; + width: var(--auto-3px); + height: var(--auto-10px); background-color: #d5d5d5; - border-radius: 3px; + border-radius: var(--auto-3px); } /* ::slotted(.icon)::before { - font-size: 27px; + font-size: var(--auto-27px); font-family: 'gaia-icons'; content: attr(data-icon); text-align: center; position: relative; - top: 357px; + top: var(--auto-357px); }*/ ::slotted([slot='icon']) { position: absolute; @@ -142,23 +133,23 @@ export const sharedStyles: CSSResult = css` } ::slotted([slot='l-icon']) { position: absolute; - left: -33px; - top: -6px; + right: var(--auto-33px); + bottom: var(--auto-6px); } ::slotted([slot='l-icon'])::before { - font-size: 25px; + font-size: var(--auto-25px); font-family: 'gaia-icons'; content: attr(data-icon); } ::slotted([slot='r-icon']) { position: absolute; - right: -33px; - top: -6px; + left: var(--auto-33px); + bottom: var(--auto-6px); } ::slotted([slot='r-icon'])::before { - font-size: 25px; + font-size: var(--auto-25px); font-family: 'gaia-icons'; content: attr(data-icon); } diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts index ecf8e5f..2d9de97 100644 --- a/src/components/slider/slider.ts +++ b/src/components/slider/slider.ts @@ -13,7 +13,7 @@ function getType(str: string) { } @customElement('star-slider') export class StarSlider extends LitElement { - _cover: string = '0' + _endValue: string = '0' _vHeight: string = '' public static override get styles(): CSSResultArray { return [sharedStyles] @@ -43,27 +43,26 @@ export class StarSlider extends LitElement { @property({type: Number}) dotL = 0 @property({type: Number}) proportion = 0 @property({type: Number}) barX = 0 - @property({type: String}) endValue = '' @property({type: String}) step = '' @property({type: String}) - get cover() { - return this._cover + get endValue() { + return this._endValue } - set cover(value: string) { + set endValue(value: string) { const type = getType(value) if (type == 'percent' && !isNaN(+value)) { value += '%' } else if (type == 'invalid') { - value = this._cover + value = this._endValue return } this.style.setProperty('--cover-width', value) - this._cover = value - this.style.setProperty('--dot-move', this._cover) + this._endValue = value + this.style.setProperty('--dot-move', this._endValue) } @property({type: String}) get vHeight() { - console.log('this._vHeight', this._vHeight) + // console.log('this._vHeight', this._vHeight) return this._vHeight } set vHeight(value: string) { @@ -131,8 +130,7 @@ export class StarSlider extends LitElement { this.touchX - this.sliderBar.getBoundingClientRect().left - this.dot.offsetWidth * 0.5 - // this.barWidth = this.sliderBar.offsetWidth - this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth + this.barWidth = this.sliderBar.offsetWidth if (this.barX < 0) { this.barX = 0 } @@ -156,11 +154,8 @@ export class StarSlider extends LitElement { } } } else { - this.style.setProperty('--dot-move', this.barX + 'px') - this.style.setProperty( - '--cover-width', - (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px' - ) + this.style.setProperty('--dot-move', this.proportion + '%') + this.style.setProperty('--cover-width', this.proportion + '%') } // 重新初始化防止滑块增量 this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标 @@ -193,11 +188,8 @@ export class StarSlider extends LitElement { //取整 this.endValue = Math.ceil(this.proportion) + '' if (!this.tick) { - this.style.setProperty('--dot-move', this.newX + 'px') - this.style.setProperty( - '--cover-width', - (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px' - ) + this.style.setProperty('--dot-move', this.proportion + '%') + this.style.setProperty('--cover-width', this.proportion + '%') } else { // tick跳格滑动 var tickStep = 100 / parseInt(this.step) //分为几格 @@ -232,10 +224,11 @@ export class StarSlider extends LitElement { }) ) } else { + console.log('endValue', this.endValue.replace('%', '')) this.dispatchEvent( new CustomEvent('star-slider-change', { detail: { - value: this.endValue, + value: this.endValue.replace('%', ''), }, bubbles: true, composed: true, @@ -256,14 +249,16 @@ export class StarSlider extends LitElement { this.dotL = this.vSliderBar.getBoundingClientRect().bottom - this.startY //点击后的黑条长度 //按压音量条变宽 - this.vSliderBar.style.setProperty('--vWidth', '16px') - this.vProgress.style.setProperty('--vWidth', '16px') + this.vSliderBar.style.setProperty('--vWidth', 'var(--auto-16px)') + this.vProgress.style.setProperty('--vWidth', 'var(--auto-16px)') //点击跳转 this.proportion = (this.dotL / this.barWidth) * 100 this.endValue = Math.ceil(this.proportion) + '' this.style.setProperty( '--cover-width', - (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px' + 'var(--auto-' + + (this.barWidth * Math.ceil(this.proportion)) / 100 + + 'px)' ) } } @@ -277,24 +272,22 @@ export class StarSlider extends LitElement { //判断最大值和最小值 this.newY = this.dotL + this.moveY if (this.newY < 0) { - // console.log('到底了') this.newY = 0 } if (this.newY >= this.barWidth) { - // console.log('超了') this.newY = this.barWidth } //计算比例 this.proportion = (this.newY / this.barWidth) * 100 //取整 this.endValue = Math.ceil(this.proportion) + '' - this.style.setProperty('--cover-width', this.newY + 'px') + this.style.setProperty('--cover-width', 'var(--auto-' + this.newY + 'px)') } } private touchEndVertical(evt: TouchEvent): string | void { if (!this.disabled && (evt.target as Element).slot !== 'icon') { - this.vProgress.style.setProperty('--vWidth', '8px') - this.vSliderBar.style.setProperty('--vWidth', '8px') + this.vProgress.style.setProperty('--vWidth', 'var(--auto-8px)') + this.vSliderBar.style.setProperty('--vWidth', 'var(--auto-8px)') this.dispatchEvent( new CustomEvent('star-slider-change', { detail: { diff --git a/src/test/panels/slider/slider.ts b/src/test/panels/slider/slider.ts index 5d9cc62..a9c2da3 100644 --- a/src/test/panels/slider/slider.ts +++ b/src/test/panels/slider/slider.ts @@ -17,20 +17,21 @@ export class PanelSlider extends LitElement { return html`

vertical

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

cover - 初始覆盖长度

+

endValue - 初始覆盖长度

- +
- +

disabled

- +
- +

unfilled - 无覆盖

- +
- +

tick - 跳格滑动

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

-

cover - 初始覆盖长度

- +

endValue - 初始覆盖长度

+

- +

disabled

- - + +

unfilled - 无覆盖

- - + +

tick

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