Field: support $attrs & $listeners

docs/examples-docs/field.md

@@ -1,8 +1,6 @@
 <style>
 .demo-field {
-  .van-field-wrapper {
-    padding: 0 10px;
-  }
+  padding-bottom: 30px;
 }
 </style>
 
@@ -10,17 +8,11 @@
 export default {
   data() {
     return {
-      username: 'zhangmin'
+      value: '',
+      password: '',
+      username: 'zhangmin',
+      message: ''
     };
-  },
-  methods: {
-    onIconClick() {
-      this.username = '';
-    },
-
-    onFieldBlur() {
-      console.log('blured');
-    }
   }
 };
 </script>
@@ -39,92 +31,78 @@ Vue.component(Field.name, Field);
 ### 代码演示
 
 #### 基础用法
-
-根据`type`属性显示不同的输入框。
+通过 v-model 绑定输入框的值
 
 :::demo 基础用法
 ```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="请输入用户名"></van-field>
+</van-cell-group>
+```
+:::
+
+#### 自定义类型
+根据`type`属性定义不同类型的输入框
+
+:::demo 自定义类型
+```html
 <van-cell-group>
   <van-field
-    type="text"
-    label="用户名："
-    placeholder="请输入用户名"
     v-model="username"
+    label="用户名"
     icon="clear"
-    :on-icon-click="onIconClick"
-    @blur="onFieldBlur"
-    required></van-field>
+    placeholder="请输入用户名"
+    required
+    @click-icon="username = ''"
+  >
+  </van-field>
+
   <van-field
+    v-model="password"
     type="password"
-    label="密码："
+    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>
 ```
 :::
 
-#### 无label的输入框
+#### 禁用输入框
 
-不传入`label`属性即可。
-
-:::demo 无label的输入框
+:::demo 禁用输入框
 ```html
 <van-cell-group>
-  <van-field type="text" placeholder="请输入用户名"></van-field>
+  <van-field value="输入框已禁用" label="用户名" disabled></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 带border的输入框
+#### 错误提示
 
-传入一个`border`属性。
-
-:::demo 带border的输入框
-```html
-<div class="van-field-wrapper">
-  <van-field type="text" placeholder="请输入用户名" border></van-field>
-</div>
-```
-:::
-
-#### 禁用的输入框
-
-传入`disabled`属性即可。
-
-:::demo 禁用的输入框
+:::demo 错误提示
 ```html
 <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
+  <van-field label="用户名" placeholder="请输入用户名" error></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 错误的输入框
+#### 高度自适应
+对于 textarea，可以通过`autosize`属性设置高度自适应
 
-传入`error`属性即可。
-
-:::demo 错误的输入框
+:::demo 高度自适应
 ```html
 <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
-</van-cell-group>
-```
-:::
-
-
-#### Autosize的输入框(仅支持textarea)
-
-传入`autosize`属性, 且将`rows`设为1。
-
-:::demo 错误的输入框
-```html
-<van-cell-group>
-  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
+  <van-field
+    v-model="message"
+    label="留言"
+    type="textarea"
+    placeholder="请输入留言"
+    rows="1"
+    autosize
+  >
+  </van-field>
 </van-cell-group>
 ```
 :::
@@ -133,23 +111,24 @@ Vue.component(Field.name, Field);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 输入框类型 | `String`  | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea`  |
-| placeholder | 输入框placeholder | `String`  |  |   |
-| value | 输入框的值 | `String`  |  |   |
-| label | 输入框标签 | `String`  |  |   |
-| disabled | 是否禁用输入框 | `Boolean`  | `false` |   |
-| error | 输入框是否有错误 | `Boolean`  | `false` |   |
-| readonly | 输入框是否只读 | `Boolean`  | `false` |   |
-| maxlength | 输入框maxlength | `String`, `Number`  |  |   |
-| rows | textarea rows | `String`, `Number`   |  |   |
-| cols | textarea cols | `String`, `Number`  |  |   |
-| autosize | 自动调整高度(仅支持textarea) | `Boolean`  | `false` |  `true`, `false` |
-| icon | 输入框尾部图标 | `String`  |  |  icon中支持的类型 |
-| onIconClick | 点击图标的回调函数 | `Function`  |  |  |
+| type | 输入框类型 | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
+| value | 输入框的值 | `String`  | - | - |
+| label | 输入框标签 | `String`  | - | - |
+| disabled | 是否禁用输入框 | `Boolean`  | `false` | - |
+| error | 输入框是否有错误 | `Boolean`  | `false` | - |
+| autosize | 高度自适应(仅支持textarea) | `Boolean`  | `false` | - |
+| icon | 输入框尾部图标 | `String`  | - |  Icon 组件支持的类型 |
+
+### Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| focus | 输入框聚焦时触发 | - |
+| blur | 输入框失焦时触发 | - |
+| click-icon | 点击尾部图标时触发 | - |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | icon | 自定义icon |
-