From 6d49d7d18cbfd17e74794b396d14473d0edc1169 Mon Sep 17 00:00:00 2001
From: Donald Shen <825870831@qq.com>
Date: Mon, 3 Jun 2019 15:09:13 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E8=8C=83=E5=9B=B4=E9=99=90=E5=88=B6=E5=A4=B1=E6=95=88?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/el-number-range.vue | 126 ++++++++++++++--------------------------
 1 file changed, 44 insertions(+), 82 deletions(-)

diff --git a/src/el-number-range.vue b/src/el-number-range.vue
index cf2d0cb..fd646ce 100644
--- a/src/el-number-range.vue
+++ b/src/el-number-range.vue
@@ -1,24 +1,23 @@
 <template>
   <div class="el-number-range">
-    <el-input :style="{width}" type="number" :value="minValue" @input="onInput($event, maxValue)" @blur="onMinBlur"></el-input>
+    <el-input :style="{width}" type="number" v-model.number="minValue"/>
     <span class="separator">{{ separator }}</span>
-    <el-input :style="{width}" type="number" :value="maxValue" @input="onInput(minValue, $event)" @blur="onMaxBlur"></el-input>
+    <el-input :style="{width}" type="number" v-model.number="maxValue"/>
   </div>
 </template>
-
 <script>
 export default {
   name: 'ElNumberRange',
   props: {
     /**
-     * 最大值
+     * 输入框的值上限
      */
     max: {
       type: Number,
       default: Infinity
     },
     /**
-     * 最小值
+     * 输入框的值下限
      */
     min: {
       type: Number,
@@ -39,95 +38,58 @@ export default {
       default: '-'
     },
     /**
-     * 输入框默认值
+     * 取数组第一位为最小值输入框的值，第二位为最大值输入框的值
+     * @model
      */
     value: {
       type: Array,
-      validator(range) {
-        return range.every(v => {
-          return !v || !isNaN(v) ? true : false
-        })
-      },
       default: () => []
     }
   },
-  data() {
-    let [minValue, maxValue] = this.value
-
-    return {
-      minValue,
-      maxValue
-    }
-  },
-  watch: {
-    // 同步max,min为传进来的value
-    value(data) {
-      let [minValue, maxValue] = data
-
-      this.minValue = minValue
-      this.maxValue = maxValue
-    }
-  },
-  methods: {
-    onInput(min, max) {
-      this.$emit('input', [min, max])
-    },
-    // min框失去焦点时若min>max,将min调小为
-    onMinBlur(e) {
-      // 输入是字符串
-      let value = e.target.value
-      let max = this.maxValue ? Number(this.maxValue) : undefined
-
-      // 空字符串
-      if (!value) {
-        this.emitInputNextTick([undefined, max])
-
-        return
-      }
-
-      value = Math.max(Number(value), this.min)
-
-      // undefined 不能比较
-      if (max) {
-        value = Math.min(value, max)
+  computed: {
+    minValue: {
+      get() {
+        return this.value[0]
+      },
+      set(val) {
+        if (typeof val !== 'number') {
+          val = undefined
+        } else {
+          val = Math.max(val, this.min)
+          val = Math.min(val, this.max)
+          if (typeof this.maxValue === 'number') {
+            val = Math.min(val, this.maxValue)
+          }
+        }
+        this.$emit('input', [val, this.maxValue])
       }
-
-      this.emitInputNextTick([value, max])
     },
-    // max框失去焦点时若max<min, 则将max调大
-    onMaxBlur(e) {
-      let value = e.target.value
-      let min = this.minValue ? Number(this.minValue) : undefined
-
-      // 空字符串
-      if (!value) {
-        this.emitInputNextTick([min, undefined])
-
-        return
-      }
-
-      value = Math.min(Number(value), this.max)
-
-      // undefined 不能比较
-      if (min) {
-        value = Math.max(value, min)
+    maxValue: {
+      get() {
+        return this.value[1]
+      },
+      set(val) {
+        if (typeof val !== 'number') {
+          val = undefined
+        } else {
+          val = Math.max(val, this.min)
+          val = Math.min(val, this.max)
+          if (typeof this.minValue === 'number') {
+            val = Math.max(val, this.minValue)
+          }
+        }
+        /**
+         * 配合v-model使用
+         */
+        this.$emit('input', [this.minValue, val])
       }
-      this.emitInputNextTick([min, value])
-    },
-    emitInputNextTick(value = [undefined, undefined]) {
-      this.$nextTick(() => {
-        this.$emit('input', value)
-      })
     }
   }
 }
 </script>
-
 <style lang="stylus">
-.el-number-range {
-  .separator {
-    color: #888;
-    padding: 0 8px;
-  }
-}
+.el-number-range
+  .separator
+    color #888
+    padding 0 8px
 </style>

From 2d7d6f2f095e7b0981a143caf378e6fb988d8dd9 Mon Sep 17 00:00:00 2001
From: Donald Shen <825870831@qq.com>
Date: Wed, 5 Jun 2019 10:07:57 +0800
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E6=8A=BD=E7=A6=BB=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/el-number-range.vue | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/el-number-range.vue b/src/el-number-range.vue
index fd646ce..ef1fc55 100644
--- a/src/el-number-range.vue
+++ b/src/el-number-range.vue
@@ -6,6 +6,8 @@
   </div>
 </template>
 <script>
+const isNum = n => typeof n === 'number'
+
 export default {
   name: 'ElNumberRange',
   props: {
@@ -52,14 +54,11 @@ export default {
         return this.value[0]
       },
       set(val) {
-        if (typeof val !== 'number') {
-          val = undefined
+        if (isNum(val)) {
+          val = this.clamp(val)
+          if (isNum(this.maxValue)) val = Math.min(val, this.maxValue)
         } else {
-          val = Math.max(val, this.min)
-          val = Math.min(val, this.max)
-          if (typeof this.maxValue === 'number') {
-            val = Math.min(val, this.maxValue)
-          }
+          val = undefined
         }
         this.$emit('input', [val, this.maxValue])
       }
@@ -69,14 +68,11 @@ export default {
         return this.value[1]
       },
       set(val) {
-        if (typeof val !== 'number') {
-          val = undefined
+        if (isNum(val)) {
+          val = this.clamp(val)
+          if (isNum(this.minValue)) val = Math.max(val, this.minValue)
         } else {
-          val = Math.max(val, this.min)
-          val = Math.min(val, this.max)
-          if (typeof this.minValue === 'number') {
-            val = Math.max(val, this.minValue)
-          }
+          val = undefined
         }
         /**
          * 配合v-model使用
@@ -84,6 +80,11 @@ export default {
         this.$emit('input', [this.minValue, val])
       }
     }
+  },
+  methods: {
+    clamp(val) {
+      return Math.max(this.min, Math.min(this.max, val))
+    }
   }
 }
 </script>

From e3d9605631ce05d18dbcd7f439a7acaebbf7ee38 Mon Sep 17 00:00:00 2001
From: Donald Shen <825870831@qq.com>
Date: Wed, 5 Jun 2019 14:12:37 +0800
Subject: [PATCH 3/3] fix #6

---
 src/el-number-range.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/el-number-range.vue b/src/el-number-range.vue
index ef1fc55..3093a14 100644
--- a/src/el-number-range.vue
+++ b/src/el-number-range.vue
@@ -6,8 +6,6 @@
   </div>
 </template>
 <script>
-const isNum = n => typeof n === 'number'
-
 export default {
   name: 'ElNumberRange',
   props: {
@@ -54,9 +52,9 @@ export default {
         return this.value[0]
       },
       set(val) {
-        if (isNum(val)) {
+        if (this.isNum(val)) {
           val = this.clamp(val)
-          if (isNum(this.maxValue)) val = Math.min(val, this.maxValue)
+          if (this.isNum(this.maxValue)) val = Math.min(val, this.maxValue)
         } else {
           val = undefined
         }
@@ -68,9 +66,9 @@ export default {
         return this.value[1]
       },
       set(val) {
-        if (isNum(val)) {
+        if (this.isNum(val)) {
           val = this.clamp(val)
-          if (isNum(this.minValue)) val = Math.max(val, this.minValue)
+          if (this.isNum(this.minValue)) val = Math.max(val, this.minValue)
         } else {
           val = undefined
         }
@@ -84,7 +82,8 @@ export default {
   methods: {
     clamp(val) {
       return Math.max(this.min, Math.min(this.max, val))
-    }
+    },
+    isNum: n => typeof n === 'number'
   }
 }
 </script>