chroe: add stepper theme and watch value

src/packages/stepper/demo.vue

@@ -6,6 +6,9 @@
         <span slot="title">
           <nut-stepper :value.sync="val1"></nut-stepper>
         </span>
+        <span slot="desc">
+          value: {{val1}} <button @click="reduce">-</button> <button @click="add">+</button> 
+        </span>
       </nut-cell>
     </div>
     <h4>设置最大最小值</h4>
@@ -48,6 +51,7 @@
         </span>
       </nut-cell>
     </div>
+    
   </div>
 </template>
 
@@ -63,6 +67,14 @@ export default {
       val6: 0
     }
   },
+  methods: {
+    add() {
+      this.val1 = Number(this.val1) + 1;
+    },
+    reduce() {
+      this.val1 = Math.max(Number(this.val1) - 1, 0);
+    }
+  },
 };
 </script>
 

src/packages/stepper/stepper.scss

@@ -66,7 +66,8 @@
         align-items: center;
         justify-content: center;
         svg{
-            width: 11px;
+            width: $stepperbar-width;
+            fill: $stepperbar-color;
         }
     }
     input{
@@ -79,6 +80,7 @@
         box-sizing: border-box; 
         outline: none;
         font-family: initial;
+        color: $stepper-color;
     }
     .nut-stepper-grey{
         color: #ececee;

src/packages/stepper/stepper.vue

@@ -88,6 +88,12 @@ export default {
             return Math.max(v, min);
         }
     },
+    watch: {
+        value(v, ov) {
+            this.num = v;
+            this.$emit('change', this.num);
+        }
+    },
     methods: {
         numchange(e) {
             let v = e.target.value;

src/styles/variable.scss

@@ -88,4 +88,8 @@ $zindex-actionsheet: 10001 !default;
 $zindex-dialog: 10000 !default;
 $zindex-picker: 10050 !default;
 // ---- Assets path ----
-$assetsPath:'../../assets' !default;
+$assetsPath:'../../assets' !default;
+// ---- Stepper ----
+$stepper-color: #333 !default;
+$stepperbar-width: 11px !default;
+$stepperbar-color: #333 !default;