Merge pull request #114 from ant-mini-program/fix-stepper

fix: fix #111

Author: 城管大队长

src/stepper/demo/index.js

@@ -2,12 +2,12 @@ Page({
   data: {
     value: 8,
   },
-  callBackFn(value){
-   console.log(value);
+  callBackFn(value) {
+    console.log(value);
   },
   modifyValue() {
     this.setData({
-      value: this.data.value + 1,
+      value: 9,
     });
-  }
+  },
 });

src/stepper/index.axml

@@ -4,16 +4,16 @@
   max="{{max}}"
   min="{{min}}"
   onChange="{{callBackFn}}"
-  readOnly="{{readOnly}}"
   step="{{step}}"
   disabled="{{disabled || readOnly}}"
 >
   <view class="am-stepper-reduce" style="opacity:{{opaReduce}}" data-type="reduce" onTap="changeFn" />
   <input
     class="am-stepper-input"
     style="display:{{showNumber ? 'inline-block' : 'none'}}"
-    value={{value}}
-    onBlur="resetFn"
+    value="{{value}}"
+    onBlur="onBlur"
+    disabled="{{disabled || readOnly}}"
     type="number"
   />
   <view class="am-stepper-add" style="opacity:{{opaAdd}}" data-type="add" onTap="changeFn" />

src/stepper/index.js

@@ -20,28 +20,31 @@ Component({
       value: Math.min(Math.max(min, value), max),
     });
   },
-  didUpdate(preProps, preData) {
+  didUpdate(preProps) {
     const { value, min, max } = this.props;
-    if (preProps.value !== this.props.value) {
+    if (preProps.value !== value) {
+      const newValue = Math.min(Math.max(min, value), max);
       this.setData({
-        value: Math.min(Math.max(min, value), max),
+        value: newValue,
       });
+      this.resetFn(newValue);
     }
   },
   methods: {
     changeFn(ev) {
       const { min, max, onChange, disabled, readOnly, step } = this.props;
       const evType = ev.target.dataset.type;
-      let { opaReduce, opaAdd, value } =this.data;
-      let enable = disabled ? disabled : readOnly;
+      let { opaReduce, opaAdd, value } = this.data;
+      const enable = disabled || readOnly;
       if (!enable) {
-        if (evType === "reduce") {
+        if (evType === 'reduce') {
           if (value > min) {
             opaAdd = 1;
             value = Math.max(min, value - step);
             opaReduce = value === min ? 0.4 : 1;
           }
         } else {
+          /* eslint-disable no-lonely-if */
           if (value < max) {
             opaReduce = 1;
             value = Math.min(value + step, max);
@@ -56,16 +59,19 @@ Component({
         onChange(value);
       }
     },
-    resetFn(ev) {
+    onBlur(event) {
+      const { value } = event.detail;
+      this.resetFn(value);
+    },
+    resetFn(value) {
       const { max, min, onChange } = this.props;
-      const value = ev.detail.value;
       let calculatedVal = value;
       let opaAdd = 1;
       let opaReduce = 1;
-      if (value > max) {
+      if (value >= max) {
         calculatedVal = max;
         opaAdd = 0.4;
-      } else if (value < min) {
+      } else if (value <= min) {
         calculatedVal = min;
         opaReduce = 0.4;
       }
@@ -76,5 +82,5 @@ Component({
       });
       onChange(calculatedVal);
     },
-  }
-})
+  },
+});

src/vtabs/index.js

@@ -15,7 +15,7 @@ Component({
     tabBarInactiveBgColor: '#f8f8f8',
     tabBarlineColor: '#108ee9',
     onTabClick: () => {},
-    onScrollBar: () => {}
+    onScrollBar: () => {},
   },
   didMount() {
     const { tabs } = this.props;
@@ -57,7 +57,7 @@ Component({
       const { anchor, index } = e.target.dataset;
 
       if (!this.isScrolling || !this.props.swipeable) {
-        if(this.data.current !== index) {
+        if (this.data.current !== index) {
           this.props.onTabClick(index);
         }
         this.setData({
@@ -76,7 +76,7 @@ Component({
         tabTop = (current - 5) * 55;
       }
       if (this.data.current !== current) {
-        this.props.onScrollBar(current)
+        this.props.onScrollBar(current);
       }
       this.setData({
         tabTop,