From b01a32d85e4ab7816dba56dac04e28f2b021fcd6 Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Wed, 7 Sep 2022 19:30:03 +0800 Subject: [PATCH] =?UTF-8?q?TASK:=20#109540=20slider=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E3=80=81slider=E7=BB=93=E6=9E=84=E5=92=8C?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BB=A5=E5=8F=8A=E5=9F=BA=E7=A1=80=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=AE=8C=E6=88=90=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/slider/README.md | 34 ++++++++-- src/components/slider/slider-styles.ts | 49 ++++++++++++++ src/components/slider/slider.ts | 94 ++++++++++++++++++++++++++ src/index.ts | 1 + src/test/panels/root.ts | 11 ++- src/test/panels/slider/slider.ts | 35 ++++++++++ 6 files changed, 219 insertions(+), 5 deletions(-) create mode 100644 src/components/slider/slider-styles.ts create mode 100644 src/components/slider/slider.ts create mode 100644 src/test/panels/slider/slider.ts diff --git a/src/components/slider/README.md b/src/components/slider/README.md index a7db29b..93e314e 100644 --- a/src/components/slider/README.md +++ b/src/components/slider/README.md @@ -1,12 +1,38 @@ # 滑块-Slider 工作职责： + - 滑块空间 -说明： -- | 用途：分割位置 +## 类型包括： +1. 默认滑块 -类型包括： +``` + +``` -- 左侧图标|滑块|右侧图标 \ No newline at end of file +2. 滑块中小球左侧进行填充 --- `filled` + +``` + +``` + +3. 禁用滑块 --- `disabled` + +``` + +``` + +4. 分格滑块 --- `Tick` + +``` + + +``` + +5. 左侧图标|滑块|右侧图标 + +``` + +``` diff --git a/src/components/slider/slider-styles.ts b/src/components/slider/slider-styles.ts new file mode 100644 index 0000000..237be0a --- /dev/null +++ b/src/components/slider/slider-styles.ts @@ -0,0 +1,49 @@ +import {css, CSSResult} from 'lit' +export const sharedStyles: CSSResult = css` + :host { + --cover-width: 100px; + --dot-move: 87px; + } + .content { + margin: 5px 5px; + position: relative; + padding: 50px 50px; + border: 1px solid skyblue; + border-radius: 5px; + } + .sliderBar { + position: absolute; + width: 100%; + height: 6px; + left: 0px; + right: 0px; + top: calc(50% - 6px / 2); + background: rgba(0, 0, 0, 0.06); + border-radius: 5px; + } + .progress { + position: absolute; + width: var(--cover-width); + /*width: 100px;*/ + height: 6px; + left: 0px; + right: 0px; + top: calc(50% - 6px / 2); + background: #4d4d4d; + border-radius: 5px; + } + .dot { + position: absolute; + left: var(--dot-move); + width: 26px; + height: 26px; + top: calc(50% - 26px / 2); + background: #544f4f; + border-radius: 50%; + } + p { + position: absolute; + right: 5px; + top: 1px; + } +` diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts new file mode 100644 index 0000000..fa55319 --- /dev/null +++ b/src/components/slider/slider.ts @@ -0,0 +1,94 @@ +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, query} from 'lit/decorators.js' +import {sharedStyles} from './slider-styles' + +export const variants = ['filled', 'tick'] + +@customElement('star-slider') +export class StarSlider extends LitElement { + _coverWidth: string = '' + public static override get styles(): CSSResultArray { + return [sharedStyles] + } + + @query('.content') content!: HTMLDivElement + @query('.sliderBar') sliderBar!: HTMLDivElement + @query('.progress') progress!: HTMLDivElement + @query('.dot') dot!: HTMLDivElement + @query('p') p!: HTMLParagraphElement + @property({type: Number}) startX = 0 + @property({type: Number}) touchX = 0 + @property({type: Number}) moveX = 0 + @property({type: Number}) newX = 0 + @property({type: Number}) barWidth = 0 + @property({type: Number}) dotL = 0 + @property({type: Number}) proportion = 0 + @property({type: String}) pValue = '' + @property({type: Number}) sliderBarLeft = 0 + @property({type: Number}) sliderBarRight = 0 + @property({type: Number}) ball = 0 + @property({type: String}) sliderCoverWidth = '' + @property({type: String}) ballMove = '' + @property({type: String}) + get coverWidth() { + return this._coverWidth + } + set coverWidth(value: string) { + this.style.setProperty('--cover-width', value) + this._coverWidth = value + } + + render() { + return html` +
+

${this.pValue}

+
+
+
+
+
+ ` + } + private touchStart(evt: TouchEvent) { + this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth //总长度减去小球覆盖的部分 + this.dotL = this.dot.offsetLeft //小球左侧相对于父元素的左边距 + this.startX = evt.touches[0].clientX //手指点下的 X 坐标 + } + private touchMove(evt: TouchEvent) { + //阻止默认行为 + evt.preventDefault() + this.touchX = evt.touches[0].clientX //整个屏幕实时触摸的 X 坐标 + this.moveX = this.touchX - this.startX //手指移动的距离 + //判断最大值和最小值 + this.newX = this.dotL + this.moveX + if (this.newX < 0) { + this.newX = 0 + } + if (this.newX >= this.barWidth) { + this.newX = this.barWidth + } + //改变dot的left值 + this.style.setProperty('--dot-move', this.newX + 'px') + //计算比例 + this.proportion = (this.newX / this.barWidth) * 100 + this.pValue = Math.ceil(this.proportion) + '' + this.progress.style.setProperty( + 'width', + (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px' + ) + } + private touchEnd(evt: TouchEvent) { + return console.log(this.pValue) + } +} + +declare global { + interface HTMLElementTagNameMap { + 'star-slider': StarSlider + } +} diff --git a/src/index.ts b/src/index.ts index 9de3d75..2a6f4d2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,6 +12,7 @@ import './components/radio/radio-group' import './components/radio/radio' import './components/toast/toast' import './components/picker/picker' +import './components/slider/slider' @customElement('settings-app') export class SettingsApp extends LitElement { @query('star-animate-section#root') private rootSection!: StarAnimateSection diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 36977fe..7a71651 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -15,7 +15,8 @@ import './blur/use-blur' import './button/button' import './container/container' import './radio/radio' - +import './switch/switch' +import './slider/slider' import './toast/toast' import './picker/picker' type SEID = string @@ -114,6 +115,14 @@ export class PanelRoot extends LitElement { href="#switch" >
+ +
+

default

+ +

初始化覆盖长度

+ + +

disabled

+ + + + + ` + } +} +declare global { + interface HTMLElementTagNameMap { + 'panel-slider': PanelSlider + } +}