优化代码逻辑

src/slider/index.js

@@ -13,8 +13,8 @@ class Slider extends Component {
       default: 0,
       observer() {}
     },
-    max: null,
+    max: 100,
-    min: null,
+    min: 0,
     step: 1,
     disabled: false,
     readonly: false,
@@ -75,6 +75,7 @@ class Slider extends Component {
       }
     }
     .tips {
+      user-select: none;
       position: absolute;
       top: -100%;
       border-radius: 4px;
@@ -101,7 +102,7 @@ class Slider extends Component {
       cursor: grabbing !important;
     }
   `
-
+  progress = 0
   mounted() {
     console.log('slider mounted')
     console.log(this.$refs, 'refs')
@@ -114,46 +115,75 @@ class Slider extends Component {
   onMousedown(e) {
     document.documentElement.classList.toggle('cursor-default')
     const start = e.clientX
-    const { value: preValue, step, max, min } = this
+    let { value: preValue, step, max, min, progress } = this
+    preValue = preValue || min
     const onMousemove = bind(document, 'mousemove', e => {
       const distance = e.clientX - start
-      const diff = Math.round((distance / this.$runway.clientWidth) * 100)
+      const scale = distance / this.$runway.clientWidth
-      let newValue = preValue + diff
+      const diff = Math.round(scale * (max - min))
-      newValue = Math.floor(newValue)
+      let newValue = Math.floor(preValue + diff)
-      if (newValue < 0) {
+      // console.log({ diff, preValue })
-        newValue = 0
+      let newProgress = progress + Math.floor(scale * 100)
+      if (newValue < min) {
+        newValue = min
       }
-      if (newValue > 100) {
+      if (newValue > max) {
-        newValue = 100
+        newValue = max
       }
       if (newValue % step) {
         return
       }
-      this.$bar.style.width = newValue + '%'
+      //  console.warn(newValue)
-      this.$dotWrap.style.left = newValue + '%'
-      this.$tips.style.left = newValue + '%'
-
       this.value = newValue
+      this.setProgress(newProgress)
     })
 
-    const onMouseup = bind(document, 'mouseup', e => {
+    const onMouseup = bind(document, 'mouseup', () => {
       unbind(document, 'mousemove', onMousemove)
       unbind(document, 'mouseup', onMouseup)
-      document.documentElement.classList.toggle('cursor-default')
     })
   }
   onClick(e) {
     if (e.target !== this.$refs.runway) {
       return
     }
+    const { max, min, step } = this
     const { clientWidth } = e.target
     const { offsetX } = e
-    this.value = Math.floor((offsetX / clientWidth) * 100)
+    const range = max - min
-    const barWidth = `${this.value}%`
+    const scale = offsetX / clientWidth
-
+    // console.log(
-    this.$bar.style.width = barWidth
+    //   {
-    this.$dotWrap.style.left = barWidth
+    //     scale,
-    this.$tips.style.left = barWidth
+    //     range
+    //   },
+    //   scale * range + min
+    // )
+    let newValue = Math.floor(scale * range + min)
+    const mod = newValue % step
+    if (mod) {
+      const half = step / 2
+      if (mod > half) {
+        newValue += step - mod
+      } else {
+        newValue -= mod
+      }
+    }
+    this.value = newValue
+    console.log(scale * 100)
+    //const progress = Math.floor(scale * 100)
+    const progress = Math.floor(((newValue - min) / range) * 100)
+    // console.log({ progress })
+    this.setProgress(progress)
+  }
+  setProgress(val) {
+    val = Math.floor(val)
+    val = val > 100 ? 100 : val
+    val = val < 0 ? 0 : val
+    this.$bar.style.width = `${val}%`
+    this.$dotWrap.style.left = `${val}%`
+    this.$tips.style.left = `${val}%`
+    this.progress = val
   }
   render() {
     return html`<div class="slider" ref="slider">