feat(stepper): prop disabled state

src/packages/stepper/demo.vue

@@ -35,6 +35,14 @@
         </span>
       </nut-cell>
     </div>
+    <h4>设置禁用</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-stepper :value.sync="val4" disabled></nut-stepper>
+        </span>
+      </nut-cell>
+    </div>
     <h4>显示边框</h4>
     <div>
       <nut-cell>
@@ -63,7 +71,7 @@ export default {
       val3: 5,
       val4: 0,
       val5: 0,
-      val6: 0,
+      val6: 0
     };
   },
   methods: {
@@ -84,8 +92,8 @@ export default {
     },
     reduce() {
       this.val1 = Math.max(Number(this.val1) - Number(0.1), 0).toFixed(1);
-    },
-  },
+    }
+  }
 };
 </script>
 

src/packages/stepper/doc.md

@@ -51,6 +51,14 @@ export default {
 ></nut-stepper>
 ```
 
+设置禁用
+
+```html
+<nut-stepper 
+    :disabled="true"
+></nut-stepper>
+```
+
 显示边框
 
 ```html
@@ -76,7 +84,8 @@ export default {
 | min | 最小值 | Number, String | 0
 | max | 最大值 | Number, String | Infinity
 | step | 步长 | Number, String | 1
-| readonly | 是否只读 | Boolean | false
+| readonly | 只读状态禁用输入框操作行为 | Boolean | false
+| disabled | 禁用所有功能 | Boolean | false
 | transition | 是否需要过渡效果 | Boolean | true
 | simple | 是否显示简单版 | Boolean | true
 | decimalPlaces | 设置保留的小数位 | Number | 0

src/packages/stepper/stepper.vue

@@ -1,10 +1,11 @@
 <template>
   <div :class="{ 'nut-stepper': !simple, 'nut-stepper-simple': simple }">
-    <span @click="reduce()" :class="{ 'nut-stepper-grey': isGray }" v-html="require('../../assets/svg/minus.svg')"> </span>
+    <span @click="reduce()" :class="{ 'nut-stepper-grey': isGray || disabled }" v-html="require('../../assets/svg/minus.svg')"> </span>
     <input
       type="number"
       :min="minNum"
       :max="max"
+      :disabled="disabled"
       :readonly="readonly || !isLegal"
       :value="num | maxv(minNum, max)"
       :style="{ visibility: showNum ? 'visible' : 'hidden' }"
@@ -41,7 +42,11 @@
       <div>{{ animNum[0] }}</div>
       <div>{{ animNum[1] }}</div>
     </div>
-    <span @click="add()" :class="{ 'nut-stepper-grey': (max && Number(num) > max - step) || !isLegal }" v-html="require('../../assets/svg/plus.svg')">
+    <span
+      @click="add()"
+      :class="{ 'nut-stepper-grey': (max && Number(num) > max - step) || !isLegal || disabled }"
+      v-html="require('../../assets/svg/plus.svg')"
+    >
     </span>
   </div>
 </template>
@@ -69,6 +74,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     transition: {
       type: Boolean,
       default: true
@@ -143,7 +152,7 @@ export default {
   },
   methods: {
     focus(e) {
-      if (this.readonly || !this.isLegal) return;
+      if (this.readonly || !this.isLegal || this.disabled) return;
       // clear val temporary when focus, e...s
       const v = this.num;
       this.tempNum = v;
@@ -153,7 +162,7 @@ export default {
       this.$emit('focus', e, this.num);
     },
     blur(e) {
-      if (this.readonly || !this.isLegal) return this.$emit('blur', e, this.num);
+      if (this.readonly || !this.isLegal || this.disabled) return this.$emit('blur', e, this.num);
       let v = e.target.value;
       this.minNum = this.min;
       this.focusing = false;
@@ -191,6 +200,7 @@ export default {
       // .replace(/(\d+\.[^0]*)0+$/, '$1').replace(/\.$/, '')
     },
     add() {
+      if (this.disabled) return;
       this.num = Number(this.num);
       if (this.num <= this.max - this.step && this.max > this.minNum) {
         let [n1, n2] = this.fixedDecimalPlaces(this.num + Number(this.step)).split('.');
@@ -220,6 +230,7 @@ export default {
       this.showNum = true;
     },
     reduce() {
+      if (this.disabled) return;
       if (this.num - this.step >= this.minNum) {
         let [n1, n2] = this.fixedDecimalPlaces(this.num - Number(this.step)).split('.');
         let fixedLen = n2 ? n2.length : 0;