fix(Counter): 修复数值更新异常问题

close #1106

Author: juzi214032

src/counter/index.js

@@ -33,12 +33,11 @@ Component({
    * 组件的初始数据
    */
   data: {
-    focus: false,
-    result: 1
+    focus: false
   },
 
   observers: {
-    'result': function (count) {
+    'count': function (count) {
       eventUtil.emit(this, 'linchange', { count });
     },
     'count,min,max': function () {
@@ -56,97 +55,75 @@ Component({
     },
 
     onCount() {
-      this.setData({
-        focus: true
-      });
+      this.setData({ focus: true });
     },
 
     onBlur(e) {
-      this.setData({
-        focus: false
-      });
       let {
         value
       } = e.detail;
       setTimeout(() => {
         this.blurCount(Number(value), () => {
-          this.data.count = this.data.result;
-          eventUtil.emit(this, 'lintap', { count: this.data.result, type: 'blur' });
+          eventUtil.emit(this, 'lintap', { count: this.data.count, type: 'blur' });
         });
       }, 50);
     },
 
     blurCount(value, callback) {
       if (value) {
         this.valueRange(value);
-      } else {
-        this.setData({
-          result: this.properties.count
-        });
       }
       callback && callback();
     },
 
     valueRange(value, way = 'input') {
-      if (value > this.properties.max) {
-        this.setData({
-          result: this.properties.max
-        }, () => {
-          eventUtil.emit(this, 'linout', { type: 'overflow_max', way });
-        });
-      } else if (value < this.properties.min) {
-        this.setData({
-          result: this.properties.min
-        }, () => {
-          eventUtil.emit(this, 'linout', { type: 'overflow_min', way });
-        });
-      } else {
-        this.setData({
-          result: value
-        });
-      }
-    },
+      const { count, min, max } = this.data;
 
-    reduceTap() {
-      let distance = this.data.count - this.properties.step;
-      if (distance <= this.properties.min) {
-        this.data.count = this.properties.min;
-      } else {
-        this.data.count -= this.properties.step;
-      }
-      this.setData({
-        result: this.data.count
-      });
-      this.triggerEvent('lintap', {
-        count: this.data.result,
-        type: 'reduce'
-      }, {
-        bubbles: true,
-        composed: true
+      // 数据错误，显示警告
+      way === 'parameter' && value > max && console.error(`Counter 组件：初始值 ${count} 大于了最大值 ${max}，请注意修正`);
+      way === 'parameter' && value < min && console.error(`Counter 组件：初始值 ${count} 小于了最小值 ${min}，请注意修正`);
+
+      // 触发相应事件
+      value > max && eventUtil.emit(this, 'linout', { type: 'overflow_max', way });
+      value < min && eventUtil.emit(this, 'linout', { type: 'overflow_min', way });
+
+      // 如果 value 越界，则修正其值
+      value = value > max ? max : value;
+      value = value < min ? min : value;
+
+      // 更新页面显示数值
+      value === this.data.count && this.setData({ focus: false });
+      value !== this.data.count && this.setData({ count: value }, () => {
+        this.setData({ focus: false });
       });
     },
 
-    addTap() {
-      let distance = this.data.count + this.properties.step;
-      if (distance >= this.properties.max) {
-        this.data.count = this.properties.max;
-      } else {
-        this.data.count += this.properties.step;
+    /**
+     * 点击 +/- 改变数值的监听函数
+     *
+     * @param {Object} e 事件对象
+     */
+    onTapChange(e) {
+      const type = e.currentTarget.dataset.changeType;
+      const { count, step, min, max } = this.data;
+      let result;
+
+      // 根据 +/- 做不同运算
+      if (type === 'add') {
+        result = count + step > max ? max : count + step;
+      } else if (type === 'reduce') {
+        result = count - step < min ? min : count - step;
       }
-      this.setData({
-        result: this.data.count
-      });
-      this.triggerEvent('lintap', {
-        count: this.data.result,
-        type: 'add'
-      }, {
-        bubbles: true,
-        composed: true
+
+      this.setData({ count: result });
+      eventUtil.emit(this, 'lintap', {
+        count: this.data.count,
+        type
       });
     },
 
-    onInput(e){
-      eventUtil.emit(this,'lininput',e.detail);
+    onInput(e) {
+      eventUtil.emit(this, 'lininput', e.detail);
     }
   }
 });

src/counter/index.wxml

@@ -1,7 +1,8 @@
 <view class="l-class container-count">
-  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}"
-        catchtap="{{result<=min|| disabled?'doNothing':'reduceTap'}}"
+  <view class="symbol {{count<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}"
+        catchtap="{{count<=min|| disabled?'doNothing':'onTapChange'}}"
         data-type="overflow_min"
+        data-change-type="reduce"
         hover-class="{{isHover?'count-hover':''}}">
     <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
@@ -10,13 +11,14 @@
           disabled="{{disabled}}"
           type="number"
           focus="{{focus}}"
-          value="{{result}}"
+          value="{{count}}"
           bind:input="onInput"
           bindblur="onBlur"/>
-  <view wx:else class="l-count-class count" mut-bind:tap="onCount">{{result}}</view>
-  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}"
-        catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}"
+  <view wx:else class="l-count-class count" mut-bind:tap="onCount">{{count}}</view>
+  <view class="l-symbol-class symbol {{count>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}"
+        catchtap="{{count>=max|| disabled?'doNothing':'onTapChange'}}"
         data-type="overflow_max"
+        data-change-type="add"
         hover-class="{{isHover?'count-hover':''}}">
        <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>