暂存

src/slider/index.js

@@ -98,7 +98,7 @@ class Slider extends Component {
       }
     }
     .cursor-default {
-      cursor: default;
+      cursor: grabbing !important;
     }
   `
 
@@ -106,16 +106,15 @@ class Slider extends Component {
     console.log('slider mounted')
     console.log(this.$refs, 'refs')
 
-    this.$bar = this.root.querySelector('.bar')
-    this.$dotWrap = this.root.querySelector('.dot-wrapper')
-    this.$runway = this.root.querySelector('.runway')
-    this.$tips = this.root.querySelector('.tips')
+    this.$bar = this.$refs.bar
+    this.$dotWrap = this.$refs.dotWrap
+    this.$runway = this.$refs.runway
+    this.$tips = this.$refs.tips
   }
   onMousedown(e) {
-    console.log(e)
     document.documentElement.classList.toggle('cursor-default')
     const start = e.clientX
-    const preValue = this.value
+    const { value: preValue, step, max, min } = this
     const onMousemove = bind(document, 'mousemove', e => {
       const distance = e.clientX - start
       const diff = Math.round((distance / this.$runway.clientWidth) * 100)
@@ -127,19 +126,26 @@ class Slider extends Component {
       if (newValue > 100) {
         newValue = 100
       }
+      if (newValue % step) {
+        return
+      }
       this.$bar.style.width = newValue + '%'
       this.$dotWrap.style.left = newValue + '%'
       this.$tips.style.left = newValue + '%'
+
       this.value = newValue
     })
 
-    bind(document, 'mouseup', e => {
+    const onMouseup = bind(document, 'mouseup', e => {
       unbind(document, 'mousemove', onMousemove)
+      unbind(document, 'mouseup', onMouseup)
       document.documentElement.classList.toggle('cursor-default')
     })
   }
   onClick(e) {
-    console.log(e)
+    if (e.target !== this.$refs.runway) {
+      return
+    }
     const { clientWidth } = e.target
     const { offsetX } = e
     this.value = Math.floor((offsetX / clientWidth) * 100)
@@ -151,13 +157,13 @@ class Slider extends Component {
   }
   render() {
     return html`<div class="slider" ref="slider">
-      <div class="runway" @click=${this.onClick}>
-        <div class="bar"></div>
-        <div class="dot-wrapper" @mousedown=${this.onMousedown}>
-          <div class="dot" ref="dot"></div>
+      <div ref="runway" class="runway" @click=${this.onClick}>
+        <div class="bar" ref="bar"></div>
+        <div class="dot-wrapper" ref="dotWrap" @mousedown=${this.onMousedown}>
+          <div class="dot"></div>
         </div>
       </div>
-      <div class="tips">${this.value}</div>
+      <div class="tips" ref="tips">${this.value}</div>
     </div>`
   }
 }