浏览代码

fix: sync value

famanoder 6 年之前
父节点
当前提交
13dcc9abdb
共有 3 个文件被更改,包括 22 次插入18 次删除
  1. 6 6
      src/packages/stepper/demo.vue
  2. 7 7
      src/packages/stepper/doc.md
  3. 9 5
      src/packages/stepper/stepper.vue

+ 6 - 6
src/packages/stepper/demo.vue

@@ -4,7 +4,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper v-model="val1"></nut-stepper>
+          <nut-stepper :value.sync="val1"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -12,7 +12,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper v-model="val2" :min="5" :max="100"></nut-stepper>
+          <nut-stepper :value.sync="val2" :min="5" :max="100"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -20,7 +20,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper v-model="val3" :step="5"></nut-stepper>
+          <nut-stepper :value.sync="val3" :step="5"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -28,7 +28,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper v-model="val4" readonly></nut-stepper>
+          <nut-stepper :value.sync="val4" readonly></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -36,7 +36,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper v-model="val5" :simple="false"></nut-stepper>
+          <nut-stepper :value.sync="val5" :simple="false"></nut-stepper>
         </span>
       </nut-cell>
     </div>
@@ -44,7 +44,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper v-model="val6" :transition="false" :simple="false"></nut-stepper>
+          <nut-stepper :value.sync="val6" :transition="false" :simple="false"></nut-stepper>
         </span>
       </nut-cell>
     </div>

+ 7 - 7
src/packages/stepper/doc.md

@@ -6,7 +6,7 @@
 
 ```html
 <nut-stepper 
-    init="1"
+    :value.sync="val1"
 ></nut-stepper>
 ```
 
@@ -14,9 +14,9 @@
 
 ```html
 <nut-stepper 
-    init="100" 
-    min="1" 
-    max="100"
+    :value.sync="val2" 
+    :min="5" 
+    :max="100"
 ></nut-stepper>
 ```
 
@@ -24,8 +24,8 @@
 
 ```html
 <nut-stepper 
-    init="10"
-    step="5"
+    :value.sync="val3" 
+    :step="5"
 ></nut-stepper>
 ```
 
@@ -58,7 +58,7 @@
 
 | 字段 | 说明 | 类型 | 默认值 
 | ----- | ----- | ----- | ----- 
-| init | 初始值 | Number, String | 1
+| value | 初始值 | Number, String | 1
 | min | 最小值 | Number, String | 0
 | max | 最大值 | Number, String | Infinity
 | step | 步长 | Number, String | 1

+ 9 - 5
src/packages/stepper/stepper.vue

@@ -89,8 +89,12 @@ export default {
         }
     },
     methods: {
-        numchange() {
-            this.$emit('input', this.num);
+        numchange(e) {
+            let v = e.target.value;
+            if(v > this.max) v = this.max;
+            if(v < this.min) v = this.min;
+            this.num = v;
+            this.$emit('update:value', this.num);
             this.$emit('change', this.num);
         },
         add() {
@@ -113,8 +117,8 @@ export default {
                     });
                 };
             }
-            this.$emit('add', this.num);
-            this.$emit('input', this.num); 
+            this.$emit('update:value', this.num);
+            this.$emit('add', this.num); 
             this.$emit('change', this.num); 
         },
         animEnd() {
@@ -140,8 +144,8 @@ export default {
                     }); 
                 }    
             }
+            this.$emit('update:value', this.num);
             this.$emit('reduce', this.num);
-            this.$emit('input', this.num);
             this.$emit('change', this.num);
         },