滑块step步数支持小数精度

src/slider/index.js

@@ -27,7 +27,7 @@ class Slider extends Component {
   static styles = [
     css`
       :host {
-        display: block;
+        display: inline-block;
         width: 100%;
         height: 38px;
       }
@@ -90,7 +90,7 @@ class Slider extends Component {
         font-size: 12px;
         line-height: 1.2;
         min-width: 10px;
-        word-wrap: break-word;
+        white-space: nowrap;
         color: #fff;
         background: #303133;
         transform: translateX(-50%);
@@ -101,7 +101,7 @@ class Slider extends Component {
         &:after {
           position: absolute;
           border: 6px solid transparent;
-          bottom: -12px;
+          bottom: -10px;
           left: 50%;
           transform: translateX(-50%);
           content: '';
@@ -142,6 +142,9 @@ class Slider extends Component {
           transform: translate(-50%, -180%);
         }
       }
+      :host([hide-tooltip]) .tips {
+        visibility: hidden;
+      }
 
       :host([loading]),
       :host([disabled]) {
@@ -180,6 +183,7 @@ class Slider extends Component {
     this.$dotWrap = this.$refs.dotWrap
     this.$runway = this.$refs.runway
     this.$tips = this.$refs.tips
+    this.accuracy = this.step >= 1 ? 0 : String(this.step).split('.')[1].length
     this.initValue(this.value)
   }
   onMousedown(e) {
@@ -191,13 +195,14 @@ class Slider extends Component {
       progress,
       vertical,
       disabled,
-      readOnly
+      readOnly,
+      accuracy
     } = this
     if (disabled || readOnly) {
       return
     }
     this.$tips.classList.toggle('show')
-    preValue = preValue || min
+    preValue = +preValue || min
 
     const start = vertical ? e.clientY : e.clientX
     const onMousemove = bind(document, 'mousemove', e => {
@@ -208,15 +213,26 @@ class Slider extends Component {
           (vertical ? this.$runway.clientHeight : this.$runway.clientWidth)) *
         (vertical ? -1 : 1)
 
-      const diff = Math.round(scale * (max - min))
+      const diff =
+        accuracy === 0 ? Math.round(scale * (max - min)) : scale * (max - min)
       let newProgress = progress + Math.floor(scale * 100)
-      let newValue = Math.floor(preValue + diff)
+      let newValue =
+        accuracy === 0 ? Math.floor(preValue + diff) : preValue + diff
       newValue = Math.max(newValue, min)
       newValue = Math.min(newValue, max)
+
+      if (accuracy === 0) {
         if (newValue % step) {
           return
         }
-      this.value = newValue
+      } else {
+        let _newValue = Math.round(newValue * Math.pow(10, accuracy))
+        let _step = step * Math.pow(10, accuracy)
+        if (_newValue % _step) {
+          return
+        }
+      }
+      this.value = newValue.toFixed(accuracy)
       requestAnimationFrame(() => {
         this.setProgress(vertical ? 100 - newProgress : newProgress)
       })
@@ -234,7 +250,7 @@ class Slider extends Component {
     if (e.target !== this.$refs.runway) {
       return
     }
-    const { max, min, step, vertical, disabled, readOnly } = this
+    let { max, min, step, vertical, disabled, readOnly, accuracy } = this
     if (disabled || readOnly) {
       return
     }
@@ -244,8 +260,11 @@ class Slider extends Component {
     const scale =
       (vertical ? offsetY : offsetX) / (vertical ? clientHeight : clientWidth)
 
-    let newValue = Math.floor(scale * range + min)
-    const mod = newValue % step
+    step *= Math.pow(10, accuracy)
+
+    let newValue =
+      +(scale * range + min).toFixed(accuracy) * Math.pow(10, accuracy)
+    let mod = +(newValue % step).toFixed(accuracy)
     if (mod) {
       const half = step / 2
       if (mod > half) {
@@ -254,10 +273,13 @@ class Slider extends Component {
         newValue -= mod
       }
     }
-    this.value = vertical ? range - newValue : newValue
+
+    newValue *= Math.pow(10, -accuracy)
+    this.value = (vertical ? range - newValue : newValue).toFixed(accuracy)
     const progress = Math.floor(((newValue - min) / range) * 100)
     this.setProgress(progress)
     this.$emit('change')
+    this.$emit('input')
     if (!this.timeout) {
       this.$tips.classList.toggle('show')
     } else {