TASK: #slider中tick属性实现及优化

2022-09-11 16:57:51 +08:00 · 2022-09-11 16:57:51 +08:00 · a90254a4b8
parent 7b8bf84d3c
commit a90254a4b8
4 changed files with 74 additions and 28 deletions
--- a/src/components/slider/README.md
+++ b/src/components/slider/README.md
@ -11,27 +11,36 @@
 ```
 <star-slider></star-slider>
 ```
-
-2. 滑块中小球左侧进行填充 --- `filled`
+2. `coverWidth` --- 初始填充

 ```
-<star-slider variant="filled"></star-slider>
+<star-slider coverWidth="150px"></star-slider>
+<star-slider coverWidth="50%"></star-slider>
 ```

-3. 禁用滑块 --- `disabled`
+3. `disabled` --- 禁用滑块

 ```
 <star-slider disabled></star-slider>
+<star-slider disabled coverWidth="150px"></star-slider>
 ```
-
-4. 分格滑块 --- `Tick`
+4. `unfilled` --- 滑块中小球左侧不进行填充

 ```
-<star-slider variant="tick" tick-step="20"></star-slider>
-<star-slider variant="tick" tick-step="20" disabled></star-slider>
+<star-slider unfilled></star-slider>
+<star-slider unfilled coverWidth="30%"></star-slider>
+<star-slider unfilled coverWidth="30%" disabled></star-slider>
 ```

-5. 左侧图标|滑块|右侧图标
+
+5. `Tick` --- 分格滑块
+
+```
+<star-slider tick step="10"></star-slider>
+<star-slider tick unfilled coverWidth="30%" step="10" disabled></star-slider>
+```
+
+6. 左侧图标|滑块|右侧图标

 ```
 <star-slider ><slot></slot></star-slider>
--- a/src/components/slider/slider-styles.ts
+++ b/src/components/slider/slider-styles.ts
@ -1,8 +1,8 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
  :host {
-    --cover-width: 100px;
-    --dot-move: 87px;
+    --cover-width: 0px;
+    --dot-move: 0px;
  }
  .content {
    margin: 5px 5px;
@ -24,7 +24,6 @@ export const sharedStyles: CSSResult = css`
  .progress {
    position: absolute;
    width: var(--cover-width);
-    /*width: 100px;*/
    height: 6px;
    left: 0px;
    right: 0px;
@ -35,9 +34,9 @@ export const sharedStyles: CSSResult = css`
  .dot {
    position: absolute;
    left: var(--dot-move);
-    width: 26px;
-    height: 26px;
-    top: calc(50% - 26px / 2);
+    width: 20px;
+    height: 20px;
+    top: calc(50% - 20px / 2);
    background: #544f4f;
    border-radius: 50%;
  }
@ -49,10 +48,22 @@ export const sharedStyles: CSSResult = css`
  :host([disabled]) .progress {
    background: #c0c0c0;
  }
+  :host([disabled]) .step {
+    background: #c0c0c0;
+  }
  :host([disabled]) .dot {
    background: #d5d5d5;
  }
  :host([unfilled]) .progress {
    background: none;
  }
+  .step {
+    position: absolute;
+    left: calc(var(--i) * 100%);
+    top: calc(50% - 10px / 2);
+    width: 3px;
+    height: 10px;
+    background-color: #544f4f;
+    border-radius: 3px;
+  }
 `
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@ -1,9 +1,12 @@
-import {html, LitElement, CSSResultArray} from 'lit'
+import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
 import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './slider-styles'
-import {state} from 'lit/decorators.js'

-export const variants = ['filled', 'tick']
+// export enum VARIANT {
+//   BASE = 'base',
+//   TICK = 'tick',
+//   ICON = 'icon',
+// }

@customElement('star-slider')
 export class StarSlider extends LitElement {
@ -17,7 +20,9 @@ export class StarSlider extends LitElement {
  @query('.progress') progress!: HTMLDivElement
  @query('.dot') dot!: HTMLDivElement
  @query('p') p!: HTMLParagraphElement
+
  @property({type: Boolean}) disabled = false
+  @property({type: Boolean}) tick = false
  @property({type: Number}) startX = 0
  @property({type: Number}) touchX = 0
  @property({type: Number}) moveX = 0
@ -25,8 +30,9 @@ export class StarSlider extends LitElement {
  @property({type: Number}) barWidth = 0
  @property({type: Number}) dotL = 0
  @property({type: Number}) proportion = 0
-  @property({type: String}) pValue = ''
  @property({type: Number}) barX = 0
+  @property({type: String}) pValue = ''
+  @property({type: String}) step = ''
  @property({type: String})
  get coverWidth() {
    return this._coverWidth
@ -39,13 +45,14 @@ export class StarSlider extends LitElement {

  render() {
    return html`
+      <!-- <p>${this.pValue}</p> -->
      <div class="content">
-        <p>${this.pValue}</p>
        <div class="sliderBar" @touchstart=${this.clickBar}>
          <div class="progress" coverWidth="100px"></div>
          <div
            class="dot"
            ?disabled="${this.disabled}"
+            ?tick="${this.tick}"
            @touchstart=${this.touchStart}
            @touchend=${this.touchEnd}
            @touchmove=${this.touchMove}
@ -54,13 +61,26 @@ export class StarSlider extends LitElement {
      </div>
    `
  }
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    if (this.tick) {
+      var tickStep = 100 / parseInt(this.step)
+      for (let i = 1; i < tickStep; i++) {
+        const stepTick = document.createElement('div')
+        stepTick.style.setProperty('--i', String(i / tickStep))
+        stepTick.classList.add('step')
+        this.sliderBar.appendChild(stepTick)
+      }
+    }
+  }

  private touchStart(evt: TouchEvent) {
    if (!this.disabled) {
+      this.startX = evt.touches[0].clientX //手指点下的初始 X 坐标
      this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth //总长度减去小球覆盖的部分
+
      this.dotL = this.dot.offsetLeft //小球左侧相对于父元素的左边距
-      console.log('dotL', this.dotL)
-      this.startX = evt.touches[0].clientX //手指点下的 X 坐标
    }
  }
  private touchMove(evt: TouchEvent) {
@ -81,6 +101,7 @@ export class StarSlider extends LitElement {
      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',
@ -103,7 +124,6 @@ export class StarSlider extends LitElement {
        this.sliderBar.getBoundingClientRect().left -
        this.dot.offsetWidth * 0.5
      this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth
-      console.log('barx', this.barX, this.barWidth)
      if (this.barX < 0) {
        this.barX = 0
      }
--- a/src/test/panels/slider/slider.ts
+++ b/src/test/panels/slider/slider.ts
@ -20,12 +20,18 @@ export class PanelSlider extends LitElement {
        <h4>coverWidth - 初始覆盖长度</h4>
        <star-slider coverWidth="150px"></star-slider>
        <star-slider coverWidth="50%"></star-slider>
-        <h4>unfilled - 无覆盖</h4>
-        <star-slider unfilled></star-slider>
-        <star-slider unfilled coverWidth="40%"></star-slider>
        <h4>disabled</h4>
-        <star-slider disabled></star-slider>
-        <star-slider disabled coverWidth="180px"></star-slider>
+        <star-slider disabled coverWidth="30%"></star-slider>
+        <star-slider disabled coverWidth="70%"></star-slider>
+        <h4>unfilled - 无覆盖</h4>
+        <star-slider unfilled coverWidth="20%"></star-slider>
+        <star-slider unfilled coverWidth="40%"></star-slider>
+        <h4>tick</h4>
+        <star-slider tick step="10"></star-slider>
+        <star-slider tick step="20" coverWidth="20%"></star-slider>
+        <star-slider tick step="50" coverWidth="40%"></star-slider>
+        <star-slider tick step="50" unfilled coverWidth="60%"></star-slider>
+        <star-slider tick step="25" disabled coverWidth="80%"></star-slider>
      </div>
    `
  }