fix range组件左右控制器重叠

src/packages/range/movebar.vue

@@ -19,6 +19,28 @@ import requestAniFrame from '../../utils/raf.js';
 export default {
   name: "nut-range-bar",
   props: {
+    direction: {
+      type: String,
+      default: 'left'
+    },
+    range: {
+      type: Array,
+      validator: function(value) {
+        return value.length === 2 && value[1] > value[0];
+      },
+      default() {
+        return [0, 10];
+      }
+    },
+    values: {
+      type: Array,
+      validator: function(value) {
+        return value.length === 2 && value[1] >= value[0];
+      },
+      default() {
+        return [0, 0];
+      }
+		},
     initLeft: {
       type: Number,
       default: 0
@@ -35,6 +57,10 @@ export default {
       type: Number,
       default: 0
     },
+    stage: {
+      type: Number,
+      default: 0
+    },
     ani: Boolean,
     mainColor: String,
     subColor: String
@@ -51,6 +77,11 @@ export default {
       this.posi = this.initLeft;
     }
   },
+  computed: {
+    total() {
+      return this.range[1] - this.range[0];
+    },
+  },
   methods: {
     onTouchStart(event) {
       if (event.cancelable) {
@@ -75,9 +106,47 @@ export default {
       });
     },
     setPosi(posi, isEnd) {
-      if (posi < 0 || posi > this.box.clientWidth) return;
-      this.posi = posi;
-      this.$emit('getPos', posi, isEnd);
+      if (posi < 0) {
+        posi = 0;
+      }
+      if (posi > this.box.clientWidth) {
+        posi = this.box.clientWidth;
+      }
+      const [prevLeft, prevRight] = this.values;
+      const [rangeLeft, rangeRight] = this.range;
+      if (this.direction === 'left') {
+        if (this.stage) {
+          let stageNum = Math.floor((prevRight - 1) / this.stage);
+          if ((posi / this.box.clientWidth) >= (stageNum * this.stage / this.total)){
+            this.posi = (stageNum * this.stage + rangeLeft) * (this.box.clientWidth / this.total);
+          } else {
+            this.posi = posi;
+          }
+        } else { 
+          if ((posi / this.box.clientWidth) >= ((prevRight - 1 - rangeLeft)/this.total)) {
+            this.posi = (prevRight - 1 - rangeLeft) * (this.box.clientWidth / this.total);
+          } else {
+            this.posi = posi;
+          }
+        }
+      } 
+      if (this.direction === 'right') {
+        if (this.stage) {
+          let stageNum = Math.ceil((prevLeft + 1) / this.stage);
+          if ((posi / this.box.clientWidth) <= (stageNum * this.stage / this.total)){
+            this.posi = (stageNum * this.stage + rangeLeft) * (this.box.clientWidth / this.total);
+          } else {
+            this.posi = posi;
+          }
+        } else { 
+          if ((posi / this.box.clientWidth) <= ((prevLeft + 1 - rangeLeft)/this.total)) {
+            this.posi = (prevLeft + 1 - rangeLeft) * (this.box.clientWidth / this.total);
+          } else {
+            this.posi = posi;
+          }
+        }
+      }
+      this.$emit('getPos', this.posi, isEnd);
     },
     onTouchEnd(event) {
       event.preventDefault();

src/packages/range/range.vue

@@ -10,7 +10,11 @@
 								background: mainColor
 							}">
 						</div>
-            <nut-range-bar 
+            <nut-range-bar
+                direction="left" 
+                :stage="stage"
+                :range="range"
+                :values="rangeValues"
                 :initLeft="initLeft1" 
                 @getPos="getPosLeft"
                 :showLabelAlways="showLabelAlways"
@@ -19,6 +23,10 @@
                 :ani.sync="ani"
 								:mainColor="mainColor"/>
             <nut-range-bar 
+                direction="right" 
+                :stage="stage"
+                :range="range"
+                :values="rangeValues"
                 :initLeft="initLeft2" 
                 @getPos="getPosRight"
                 :showLabelAlways="showLabelAlways"
@@ -87,7 +95,8 @@ export default {
       }
     },
     stage: {
-      type: [String, Number],
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -141,43 +150,54 @@ export default {
       this.propInit();
     },
 		updateRangeValues() {
-      let rangeValues = this.currentLeft > this.currentRight? [this.currentRight, this.currentLeft]: [this.currentLeft, this.currentRight];
+      let rangeValues = [this.currentLeft, this.currentRight];
       this.$emit("update:rangeValues", rangeValues);
 		},
     getPosLeft(pos, isEnd) {
+      this.barleft1 = pos;
       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;
+      let [prevLeft, prevRight] = this.prevValues;
+      if (isEnd) {
+        if (this.stage) {
+          let stageNum = 0;
+          if (currentLeft > prevLeft) {
+            stageNum = Math.ceil(currentLeft / this.stage); 
+          } else {
+            stageNum = Math.floor(currentLeft / this.stage); 
+          }
+          this.currentLeft = stageNum * this.stage;
         } else {
-          this.currentLeft = prevLeft;
+          this.currentLeft = currentLeft;
         }
       } else {
         this.currentLeft = currentLeft;
       }
-      this.barleft1 = pos;
-      this.updateRangeValues();
-    
+      if (isEnd) {
+        this.updateRangeValues();
+      }
     },
     getPosRight(pos, isEnd) {
+      this.barleft2 = pos;
       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;
+      let [prevLeft, prevRight] = this.prevValues;
+      if (isEnd) {
+        if (this.stage) {
+          let stageNum = 0;
+          if (currentRight > prevRight) {
+            stageNum = Math.ceil(currentRight / this.stage); 
+          } else {
+            stageNum = Math.floor(currentRight / this.stage); 
+          }
+          this.currentRight = stageNum * this.stage;
         } else {
-          this.currentRight = prevRight;
+          this.currentRight = currentRight;
         }
       } else {
         this.currentRight = currentRight;
       }
-			this.barleft2 = pos;
-			this.updateRangeValues();
+      if (isEnd) {
+        this.updateRangeValues();
+      }
     },
     setCurrent(posi) {
 			const trans = posi / this.box.clientWidth * this.total;