Field 增加blur事件 && Field 支持尾部icon (#53)

docs/examples-docs/field.md

@@ -14,6 +14,15 @@ export default {
     return {
       username: 'zhangmin'
     };
+  },
+  methods: {
+    onIconClick() {
+      this.username = '';
+    },
+
+    onFieldBlur() {
+      console.log('blured');
+    }
   }
 };
 </script>
@@ -62,7 +71,15 @@ export default {
 :::demo 基础用法
 ```html
 <van-cell-group>
-  <van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
+  <van-field
+    type="text"
+    label="用户名："
+    placeholder="请输入用户名"
+    v-model="username"
+    icon="clear"
+    :on-icon-click="onIconClick"
+    @blur="onFieldBlur"
+    required></van-field>
   <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
   <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
 </van-cell-group>
@@ -145,4 +162,6 @@ export default {
 | rows | textarea rows | `string`, `number`   |  |   |
 | cols | textarea cols | `string`, `number`  |  |   |
 | autosize | 自动调整高度(仅支持textarea) | `boolean`  | `false` |  `true`, `false` |
+| icon | 输入框尾部图标 | `string`  |  |  icon中支持的类型 |
+| onIconClick | 点击图标的回调函数 | `function`  |  |  |
 

packages/field/src/field.vue

@@ -17,6 +17,7 @@
       class="van-field__control"
       v-model="currentValue"
       @focus="handleInputFocus"
+      @blur="handleInputBlur"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
@@ -30,23 +31,27 @@
       :value="currentValue"
       @input="handleInput"
       @focus="handleInputFocus"
+      @blur="handleInputBlur"
       :type="type"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
+    <van-icon v-if="icon" :name="icon" class="van-field__icon" @click="onIconClick"></van-icon>
   </van-cell>
 </template>
 
 <script>
 const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
 import vanCell from 'packages/cell';
+import vanIcon from 'packages/icon';
 
 export default {
   name: 'van-field',
 
   components: {
-    vanCell
+    vanCell,
+    vanIcon
   },
 
   props: {
@@ -71,6 +76,11 @@ export default {
     autosize: {
       type: Boolean,
       default: false
+    },
+    icon: String,
+    onIconClick: {
+      type: Function,
+      default: () => {}
     }
   },
 
@@ -107,6 +117,10 @@ export default {
 
     handleInputFocus() {
       this.$emit('focus');
+    },
+
+    handleInputBlur() {
+      this.$emit('blur');
     }
   }
 };

packages/vant-css/src/field.css

@@ -1,6 +1,7 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
 @import './cell.css';
+@import './icon.css';
 
 @component-namespace van {
   @b field {
@@ -85,5 +86,13 @@
       resize: none;
       outline: 0;
     }
+
+    @e icon {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      padding: 10px;
+    }
   }
 }