field 增加icon slot支持 (#76)

* field 增加icon slot支持

docs/examples-docs/field.md

@@ -47,7 +47,15 @@ export default {
     :on-icon-click="onIconClick"
     @blur="onFieldBlur"
     required></van-field>
-  <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
+  <van-field
+    type="password"
+    label="密码："
+    placeholder="请输入密码"
+    required>
+    <template slot="icon">
+      <van-icon name="search"></van-icon>
+    </template>
+  </van-field>
   <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
 </van-cell-group>
 ```
@@ -132,3 +140,9 @@ export default {
 | icon | 输入框尾部图标 | `string`  |  |  icon中支持的类型 |
 | onIconClick | 点击图标的回调函数 | `function`  |  |  |
 
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| icon | 自定义icon |
+

packages/field/src/field.vue

@@ -9,7 +9,8 @@
       'van-field--disabled': disabled,
       'van-field--error': error,
       'van-field--border': border,
-      'van-field--autosize': autosize
+      'van-field--autosize': autosize,
+      'van-field--has-icon': showIcon
     }">
     <textarea
       v-if="type === 'textarea'"
@@ -37,7 +38,11 @@
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
-    <van-icon v-if="icon && currentValue" :name="icon" class="van-field__icon" @click="onIconClick"></van-icon>
+    <div v-if="showIcon" class="van-field__icon" @click="onIconClick">
+      <slot name="icon">
+        <van-icon :name="icon"></van-icon>
+      </slot>
+    </div>
   </van-cell>
 </template>
 
@@ -101,6 +106,17 @@ export default {
     }
   },
 
+  computed: {
+    showIcon() {
+      // 有icon的slot，就认为一直展示
+      if (this.$slots.icon) {
+        return true;
+      }
+
+      return this.icon && this.currentValue;
+    }
+  },
+
   methods: {
     handleInput(event) {
       this.currentValue = event.target.value;

packages/vant-css/src/field.css

@@ -78,6 +78,12 @@
     }
   }
 
+  &--has-icon {
+    .van-field__control {
+      width: 90%;
+    }
+  }
+
   &__control {
     border: 0;
     font-size: 14px;