[Improvement] Reorganize document (#1066)
This commit is contained in:
neverland
@@ -0,0 +1,138 @@
|
||||
## Field
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.use(Field);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
The value of filed is bound with v-model.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="Username" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Custom type
|
||||
Use `type` prop to custom diffrent type fileds.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="Username"
|
||||
icon="clear"
|
||||
placeholder="Username"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
value="Disabled"
|
||||
label="Username"
|
||||
disabled
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Error info
|
||||
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"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Auto resize
|
||||
Textarea Filed can be auto resize when has `autosize` prop
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="Message"
|
||||
type="textarea"
|
||||
placeholder="Message"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</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`
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | Filed value | `String` | - |
|
||||
| label | Filed label | `String` | - |
|
||||
| type | Input type | `String` | `text` |
|
||||
| disabled | Disable field | `Boolean` | `false` |
|
||||
| error | Whether to show error info | `Boolean` | `false` |
|
||||
| error-message | Error message | `String` | `''` |
|
||||
| autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |
|
||||
| icon | Right side Icon name | `String` | - |
|
||||
|
||||
### Event
|
||||
Filed support all native events of input tag，such as `focus`、`blur`、`keypress`
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| click-icon | Triggered when click the icon of filed | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| label | Custom label |
|
||||
| icon | Custom icon |
|
||||
| button | Insert button |
|
||||
@@ -0,0 +1,140 @@
|
||||
## Field 输入框
|
||||
|
||||
`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.use(Field);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过 v-model 绑定输入框的值
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 自定义类型
|
||||
根据`type`属性定义不同类型的输入框
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
icon="clear"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 禁用输入框
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
value="输入框已禁用"
|
||||
label="用户名"
|
||||
disabled
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 错误提示
|
||||
通过`error`或者`error-message`属性增加对应的错误提示
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
placeholder="请输入用户名"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
label="手机号"
|
||||
placeholder="请输入手机号"
|
||||
error-message="手机号格式错误"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 高度自适应
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</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` 等
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| label | 标签 | `String` | - |
|
||||
| value | 当前输入的值 | `String` | - |
|
||||
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` |
|
||||
| error | 是否将输入内容标红 | `Boolean` | `false` |
|
||||
| error-message | 底部错误提示文案 | `String` | `''` |
|
||||
| autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |
|
||||
| icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - |
|
||||
|
||||
### Event
|
||||
Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click-icon | 点击尾部图标时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| label | 自定义输入框标签 |
|
||||
| icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
Reference in New Issue
Block a user