fix range 属性 stage 失效 #242

jdf2e · May 11, 2020 · ea54bbb · ea54bbb
1 parent 02ee3f2
commit ea54bbb
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 17 deletions.
diff --git a/src/packages/range/demo.vue b/src/packages/range/demo.vue
@@ -45,6 +45,18 @@
         <span slot="title">{{val2[0]}},{{val2[1]}}</span>
       </nut-cell>
     </div>
+
+    <h4>控制区间步长</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-range color="#31ccec" :rangeValues.sync="val4" :range="[0,200]" :stage="20" :showLabel="true"></nut-range>
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title">{{val4[0]}},{{val4[1]}}</span>
+      </nut-cell>
+    </div>
   </div>
 </template>
 
@@ -54,7 +66,8 @@ export default {
     return {
       val1: [-52, 120],
       val2: [0, 120],
-      val3: [0, 5]
+      val3: [0, 5],
+      val4: [20, 100]
     };
   },
   methods: {}

diff --git a/src/packages/range/movebar.vue b/src/packages/range/movebar.vue
@@ -47,7 +47,7 @@ export default {
     };
   },
   watch: {
-    initLeft() {
+    initLeft(val) {
       this.posi = this.initLeft;
     }
   },
@@ -71,17 +71,26 @@ export default {
             document.documentElement.scrollLeft || document.body.scrollLeft;
           this.boxLeft = this.box.getBoundingClientRect().left;
           const posi = evt.pageX - this.boxLeft - pageScrollLeft;
-          this.setPosi(posi);
+          this.setPosi(posi, false);
       });
     },
-    setPosi(posi) {
+    setPosi(posi, isEnd) {
       if (posi < 0 || posi > this.box.clientWidth) return;
       this.posi = posi;
-      this.$emit('getPos', posi);
+      this.$emit('getPos', posi, isEnd);
     },
     onTouchEnd(event) {
       event.preventDefault();
-      this.$emit('update:ani', false);
+      const evt = event.changedTouches[0];
+      const pageScrollLeft =
+        document.documentElement.scrollLeft || document.body.scrollLeft;
+      this.boxLeft = this.box.getBoundingClientRect().left;
+      const posi = evt.pageX - this.boxLeft - pageScrollLeft;
+      setTimeout(() => {
+        this.setPosi(posi, true);
+        this.$emit('update:ani', false);
+      }, 50);
+      
     },
     onClick(event) {
       event.preventDefault();

diff --git a/src/packages/range/range.vue b/src/packages/range/range.vue
@@ -101,7 +101,8 @@ export default {
 			barleft1: 0,
 			barleft2: 0,
       level: null,
-			ani: false
+      ani: false,
+      prevValues: []
     };
   },
   watch: {
@@ -110,6 +111,11 @@ export default {
     },
     rangeValues() {
       this.init();
+    },
+    ani(flag) {
+      if (flag) {
+        this.prevValues = this.rangeValues;
+      }
     }
   },
   computed: {
@@ -135,22 +141,47 @@ export default {
       this.propInit();
     },
 		updateRangeValues() {
-			let rangeValues = this.currentLeft > this.currentRight? [this.currentRight, this.currentLeft]: [this.currentLeft, this.currentRight];
-			this.$emit("update:rangeValues", rangeValues);
+      let rangeValues = this.currentLeft > this.currentRight? [this.currentRight, this.currentLeft]: [this.currentLeft, this.currentRight];
+      this.$emit("update:rangeValues", rangeValues);
 		},
-    getPosLeft(pos) {
-			this.currentLeft = this.setCurrent(pos);
-			this.barleft1 = pos;
-			this.updateRangeValues();
+    getPosLeft(pos, isEnd) {
+      let currentLeft = this.setCurrent(pos);
+      if (isEnd && this.stage) {
+        let prevLeft = this.prevValues[0];
+        if (currentLeft >= (prevLeft + (this.stage / 2))) {
+          this.currentLeft = prevLeft + this.stage;
+        } else if (currentLeft < (prevLeft - (this.stage / 2))) {
+          this.currentLeft = prevLeft - this.stage;
+        } else {
+          this.currentLeft = prevLeft;
+        }
+      } else {
+        this.currentLeft = currentLeft;
+      }
+      this.barleft1 = pos;
+      this.updateRangeValues();
+    
     },
-    getPosRight(pos) {
-			this.currentRight = this.setCurrent(pos);
+    getPosRight(pos, isEnd) {
+      let currentRight = this.setCurrent(pos);
+      if (isEnd && this.stage) {
+        let prevRight = this.prevValues[1];
+        if (currentRight >= (prevRight + (this.stage / 2))) {
+          this.currentRight = prevRight + this.stage;
+        } else if (currentRight < (prevRight - (this.stage / 2))) {
+          this.currentRight = prevRight - this.stage;
+        } else {
+          this.currentRight = prevRight;
+        }
+      } else {
+        this.currentRight = currentRight;
+      }
 			this.barleft2 = pos;
 			this.updateRangeValues();
     },
     setCurrent(posi) {
 			const trans = posi / this.box.clientWidth * this.total;
-			let current = (trans / this.cell) * this.cell + this.range[0];
+      let current = (trans / this.cell) * this.cell + this.range[0];
 			return current > this.range[1] - 1? this.range[1]: current < this.range[0] + 1? this.range[0]: Math.round(current);
     },
     setVal(posi) {
@@ -187,7 +218,7 @@ export default {
 			this.initLeft1 = this.valToPosi(this.currentLeft);
 			this.initLeft2 = this.valToPosi(this.currentRight);
 			this.barleft1 = this.initLeft1;
-			this.barleft2 = this.initLeft2;
+      this.barleft2 = this.initLeft2;
     }
   },
   mounted() {