[Improvement] Field: add button slot (#772)

docs/demos/views/field.vue

@@ -35,7 +35,12 @@
 
     <demo-block :title="$t('title4')">
       <van-cell-group>
-        <van-field :label="$t('username')" :placeholder="$t('usernamePlaceholder')" error />
+        <van-field
+          v-model="username2"
+          :label="$t('username')"
+          :placeholder="$t('usernamePlaceholder')"
+          error
+        />
         <van-field
           v-model="phone"
           :label="$t('phone')"
@@ -53,10 +58,25 @@
           type="textarea"
           :placeholder="$t('messagePlaceholder')"
           rows="1"
-          :autosize="{ maxHeight: 100, minHeight: 40 }"
+          autosize
         />
       </van-cell-group>
     </demo-block>
+
+    <demo-block :title="$t('title6')">
+      <van-cell-group>
+        <van-field
+          center
+          v-model="sms"
+          :label="$t('sms')"
+          :placeholder="$t('smsPlaceholder')"
+          icon="clear"
+          @click-icon="sms = ''"
+        >
+          <van-button slot="button" size="small" type="primary">{{ $t('sendSMS') }}</van-button>
+        </van-field>
+      </van-cell-group>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -68,8 +88,12 @@ export default {
       title3: '禁用输入框',
       title4: '错误提示',
       title5: '高度自适应',
+      title6: '插入按钮',
       message: '留言',
       phone: '手机号',
+      sms: '短信验证码',
+      sendSMS: '发送验证码',
+      smsPlaceholder: '请输入短信验证码',
       phonePlaceholder: '请输入手机号',
       messagePlaceholder: '请输入留言',
       inputDisabled: '输入框已禁用',
@@ -80,8 +104,12 @@ export default {
       title3: 'Disabled',
       title4: 'Error info',
       title5: 'Auto resize',
+      title6: 'Insert button',
       message: 'Message',
       phone: 'Phone',
+      sms: 'SMS',
+      sendSMS: 'Send SMS',
+      smsPlaceholder: 'SMS',
       phonePlaceholder: 'Phone',
       messagePlaceholder: 'Message',
       inputDisabled: 'Disabled',
@@ -91,9 +119,11 @@ export default {
 
   data() {
     return {
+      sms: '',
       value: '',
       password: '',
       username: '',
+      username2: '',
       message: '',
       phone: '1365577'
     };

docs/markdown/en-US/field.md

@@ -60,11 +60,13 @@ Use `error` or `error-message` to show error info
 ```html
 <van-cell-group>
   <van-field
+    v-model="username"
     label="Username"
     placeholder="Username"
     error
   />
   <van-field
+    v-model="phone"
     label="Phone"
     placeholder="Phone"
     error-message="Invalid phone"
@@ -88,6 +90,24 @@ Textarea Filed can be auto resize when has `autosize` prop
 </van-cell-group>
 ```
 
+#### Insert button
+Use button slot to insert button
+
+```html
+<van-cell-group>
+  <van-field
+    center
+    v-model="sms"
+    label="SMS"
+    placeholder="SMS"
+    icon="clear"
+    @click-icon="sms = ''"
+  >
+    <van-button slot="button" size="small" type="primary">Send SMS</van-button>
+  </van-field>
+</van-cell-group>
+```
+
 ### API
 Filed support all native properties of input tag，such as `maxlength`、`placeholder`、`readonly`、`autofocus`
 
@@ -114,3 +134,4 @@ Filed support all native events of input tag，such as `focus`、`blur`、`keypr
 | name | Description |
 |-----------|-----------|
 | icon | Custom icon |
+| button | Insert button |

docs/markdown/zh-CN/field.md

@@ -62,11 +62,13 @@ Vue.use(Field);
 ```html
 <van-cell-group>
   <van-field
+    v-model="username"
     label="用户名"
     placeholder="请输入用户名"
     error
   />
   <van-field
+    v-model="phone"
     label="手机号"
     placeholder="请输入手机号"
     error-message="手机号格式错误"
@@ -90,6 +92,24 @@ Vue.use(Field);
 </van-cell-group>
 ```
 
+#### 插入按钮
+通过 button slot 可以在输入框尾部插入按钮
+
+```html
+<van-cell-group>
+  <van-field
+    center
+    v-model="sms"
+    label="短信验证码"
+    placeholder="请输入短信验证码"
+    icon="clear"
+    @click-icon="sms = ''"
+  >
+    <van-button slot="button" size="small" type="primary">发送验证码</van-button>
+  </van-field>
+</van-cell-group>
+```
+
 ### API
 Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`readonly`、`autofocus` 等
 
@@ -115,4 +135,5 @@ Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k
 
 | 名称 | 说明 |
 |-----------|-----------|
-| icon | 自定义icon |
+| icon | 自定义输入框尾部图标 |
+| button | 自定义输入框尾部按钮 |