Browse Source

feat(stepper): add focus/blur event

famanoder 6 years ago
parent
commit
1f93bc7058
3 changed files with 34 additions and 4 deletions
  1. 20 2
      src/packages/stepper/demo.vue
  2. 11 1
      src/packages/stepper/doc.md
  3. 3 1
      src/packages/stepper/stepper.vue

+ 20 - 2
src/packages/stepper/demo.vue

@@ -4,10 +4,10 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-stepper :value.sync="val1" :max="12"></nut-stepper>
+          <nut-stepper @focus="focus" :blur="blur" :value.sync="val1" :max="12"></nut-stepper>
         </span>
         <span slot="desc">
-          value: {{val1}} <button @click="reduce">-</button> <button @click="add">+</button> 
+          value: {{val1}} <button @click="reduce" class="demo-btn">-</button> <button @click="add" class="demo-btn">+</button> 
         </span>
       </nut-cell>
     </div>
@@ -68,6 +68,12 @@ export default {
     }
   },
   methods: {
+    focus(v) {
+      // console.log('focus,', v)
+    },
+    blur(v) {
+      // console.log('focus,', v)
+    },
     add() {
       this.val1 = Number(this.val1) + 1;
     },
@@ -79,4 +85,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.demo-btn{
+  border: 1px solid #ddd;
+  background: #eee;
+  border-radius: 4px;
+  outline: none;
+  padding: 3px 10px;
+  cursor: pointer;
+  transition: all .35s;
+  &:hover{
+    background: #ddd;
+  }
+}
 </style>

+ 11 - 1
src/packages/stepper/doc.md

@@ -64,4 +64,14 @@
 | step | 步长 | Number, String | 1
 | readonly | 是否只读 | Boolean | false
 | transition | 是否需要过渡效果 | Boolean | true
-| simple | 是否显示简单版 | Boolean | true
+| simple | 是否显示简单版 | Boolean | true
+
+## Event
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | -----
+| add | 点击加时触发事件 | value
+| reduce | 点击减时触发事件 | value
+| change | 值改变时触发事件 | value
+| blur | 输入框失去焦点时触发事件 | value
+| focus | 输入框获取焦点时触发事件 | value

+ 3 - 1
src/packages/stepper/stepper.vue

@@ -126,9 +126,10 @@ export default {
             this.minNum = '';
             // this.num = '';
             this.focusing = true;
+            this.$emit('focus', this.num);
         },
         blur(e) {
-            if(this.readonly) return;
+            if(this.readonly) return this.$emit('focus', this.num);
             let v = e.target.value;
             this.minNum = this.min;
             this.focusing = false;
@@ -139,6 +140,7 @@ export default {
             }else{
                 this.num = this.tempNum;
             }
+            this.$emit('focus', this.num);
         },
         checknum(e) {
             let v = e.target.value;