From ac6abf67b7fc98e71bc0a0186ed572a4219c2208 Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Sat, 15 Jul 2017 21:30:36 +0800
Subject: [PATCH] =?UTF-8?q?Field=20=E5=A2=9E=E5=8A=A0blur=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=20&&=20Field=20=E6=94=AF=E6=8C=81=E5=B0=BE=E9=83=A8ic?=
 =?UTF-8?q?on=20(#53)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/examples-docs/field.md     | 21 ++++++++++++++++++++-
 packages/field/src/field.vue    | 16 +++++++++++++++-
 packages/vant-css/src/field.css |  9 +++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index c2223ff99..5dc74c679 100644
--- a/docs/examples-docs/field.md
+++ b/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`  |  |  |
 
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index cbc38a10b..c6eda14b1 100644
--- a/packages/field/src/field.vue
+++ b/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');
     }
   }
 };
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index 2acaa8388..4cfa75a6d 100644
--- a/packages/vant-css/src/field.css
+++ b/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;
+    }
   }
 }