fix(stepper): data binding trigger unnecessary checks & maximum and m…

…inimum check release boundary v (didi#615) didi#614
mandyHuangZiHong · Nov 23, 2019 · faac4da · faac4da
1 parent 9c2258c
commit faac4da
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/components/stepper/index.vue b/components/stepper/index.vue
@@ -15,6 +15,7 @@
         :value="currentNum"
         :readOnly="readOnly"
         @input="$_onInput"
+        @focus="$_onFocus"
         @blur="$_onChange">
     </div>
     <div
@@ -94,6 +95,7 @@ export default {
     return {
       isMin: false,
       isMax: false,
+      isEditing: false,
       currentNum: 0,
     }
   },
@@ -113,6 +115,9 @@ export default {
       this.currentNum = this.$_getCurrentNum(val)
     },
     value(val) {
+      if (this.isEditing) {
+        return
+      }
       this.currentNum = this.$_getCurrentNum(val)
     },
     min(val) {
@@ -178,8 +183,8 @@ export default {
       return Math.max(Math.min(this.max, this.$_formatNum(value)), this.min)
     },
     $_checkStatus() {
-      this.isMin = subtr(this.currentNum, this.step) < this.min
-      this.isMax = accAdd(this.currentNum, this.step) > this.max
+      this.isMin = this.currentNum <= this.min
+      this.isMax = this.currentNum >= this.max
     },
     $_checkMinMax() {
       if (this.min > this.max) {
@@ -197,7 +202,11 @@ export default {
       }
       this.currentNum = formatted
     },
+    $_onFocus() {
+      this.isEditing = true
+    },
     $_onChange() {
+      this.isEditing = false
       this.currentNum = this.$_getCurrentNum(this.currentNum)
     },
   },

diff --git a/components/stepper/test/index.spec.js b/components/stepper/test/index.spec.js
@@ -72,14 +72,30 @@ describe('Stepper Operation', () => {
   test('stepper method checkStatus', () => {
     wrapper = mount(Stepper)
     wrapper.vm.min = 2
+    wrapper.vm.max = 5
     wrapper.vm.currentNum = 3
     wrapper.vm.step = 2
     wrapper.vm.$_checkStatus()
+    expect(wrapper.vm.isMin).toBe(false)
+    wrapper.vm.$_reduce()
+    expect(wrapper.vm.currentNum).toBe(2)
     expect(wrapper.vm.isMin).toBe(true)
+    wrapper.vm.currentNum = 4
+    wrapper.vm.$_checkStatus()
+    expect(wrapper.vm.isMax).toBe(false)
+    wrapper.vm.$_add()
+    expect(wrapper.vm.currentNum).toBe(5)
+    expect(wrapper.vm.isMax).toBe(true)
   })
 
   test('stepper input', () => {
-    wrapper = mount(Stepper)
+    wrapper = mount(Stepper, {
+      listeners: {
+        input(val) {
+          wrapper.setProps({value: val})
+        },
+      },
+    })
     const input = wrapper.find('input')
     triggerTouch(input.element, 'focus')
     triggerTouch(input.element, 'input', 0, 0, 5)