# Field
### Intro
Field component let users enter and edit text.
### Install
Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
```js
import { createApp } from 'vue';
import { Field, CellGroup } from 'vant';
const app = createApp();
app.use(Field);
app.use(CellGroup);
```
## Usage
### Basic Usage
The value of field is bound with v-model.
```html
<van-cell-group inset>
<van-field v-model="value" label="Label" placeholder="Text" />
</van-cell-group>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref('');
return { value };
},
};
```
### Custom Type
Use `type` prop to custom different type fields.
```html
<van-cell-group inset>
<van-field v-model="text" label="Text" />
<van-field v-model="tel" type="tel" label="Phone" />
<van-field v-model="digit" type="digit" label="Digit" />
<van-field v-model="number" type="number" label="Number" />
<van-field v-model="password" type="password" label="Password" />
</van-cell-group>
```
```js
import { ref } from 'vue';
export default {
setup() {
const tel = ref('');
const text = ref('');
const digit = ref('');
const number = ref('');
const password = ref('');
return { tel, text, digit, number, password };
},
};
```
### Disabled
```html
<van-cell-group inset>
<van-field label="Text" model-value="Input Readonly" readonly />
<van-field label="Text" model-value="Input Disabled" disabled />
</van-cell-group>
```
### Show Icon
```html
<van-cell-group inset>
<van-field
v-model="value1"
label="Text"
left-icon="smile-o"
right-icon="warning-o"
placeholder="Show Icon"
/>
<van-field
v-model="value2"
clearable
label="Text"
left-icon="music-o"
placeholder="Show Clear Icon"
/>
</van-cell-group>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value1 = ref('');
const value2 = ref('123');
return {
value1,
value2,
};
},
};
```
### Required
Use the `required` prop to display a required asterisk.
```html
<van-cell-group inset>
<van-field
v-model="username"
required
label="Username"
placeholder="Username"
/>
<van-field v-model="phone" required label="Phone" placeholder="Phone" />
</van-cell-group>
```
Please note that the `required` prop is only used for controlling the style. For form validation, you need to use the `rule.required` option to control the validation logic.
### Auto Required
You can set `required="auto"` on the Form component, and all the fields inside the Form will automatically display the asterisk based on the `rule.required` option.
```html
<van-form required="auto">
<van-field
v-model="username"
:rules="[{ required: true }]"
label="Username"
placeholder="Username"
/>
<van-field
v-model="phone"
:rules="[{ required: false }]"
label="Phone"
placeholder="Phone"
/>
</van-form>
```
### Error Info
Use `error` or `error-message` to show error info.
```html
<van-cell-group inset>
<van-field v-model="username" error label="Username" placeholder="Username" />
<van-field
v-model="phone"
label="Phone"
placeholder="Phone"
error-message="Invalid phone"
/>
</van-cell-group>
```
### Insert Button
Use button slot to insert button.
```html
<van-cell-group inset>
<van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
<template #button>
<van-button size="small" type="primary">Send SMS</van-button>
</template>
</van-field>
</van-cell-group>
```
### Format Value
Use `formatter` prop to format the input value.
```html
<van-cell-group inset>
<van-field
v-model="value1"
label="Text"
:formatter="formatter"
placeholder="Format On Change"
/>
<van-field
v-model="value2"
label="Text"
:formatter="formatter"
format-trigger="onBlur"
placeholder="Format On Blur"
/>
</van-cell-group>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value1 = ref('');
const value2 = ref('');
const formatter = (value) => value.replace(/\d/g, '');
return {
value1,
value2,
formatter,
};
},
};
```
### Auto Resize
Textarea Field can be auto resize when has `autosize` prop.
```html
<van-cell-group inset>
<van-field
v-model="message"
label="Message"
type="textarea"
placeholder="Message"
rows="1"
autosize
/>
</van-cell-group>
```
### Show Word Limit
```html
<van-cell-group inset>
<van-field
v-model="message"
rows="2"
autosize
label="Message"
type="textarea"
maxlength="50"
placeholder="Message"
show-word-limit
/>
</van-cell-group>
```
### Input Align
Use `input-align` prop to align the input value.
```html
<van-cell-group inset>
<van-field
v-model="value"
label="Text"
placeholder="Input Align Right"
input-align="right"
/>
</van-cell-group>
```
### Label Align
Use `label-align` prop to align the input value, can be set to `center`, `right` or `top`.
```html
<van-cell-group inset>
<van-field
v-model="value"
label="Label"
placeholder="Align Top"
label-align="top"
/>
<van-field
v-model="value2"
label="Label"
placeholder="Align Left"
label-align="left"
/>
<van-field
v-model="value3"
label="Label"
placeholder="Align Center"
label-align="center"
/>
<van-field
v-model="value4"
label="Label"
placeholder="Align Right"
label-align="right"
/>
</van-cell-group>
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Input value | _number \| string_ | - |
| label | Left side label | _string_ | - |
| name | As the identifier when submitting the form | _string_ | - |
| id | Input id, the for attribute of the label also will be set | _string_ | `van-field-n-input` |
| type | Input type, support all [native types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) and `digit` type | _FieldType_ | `text` |
| size | Size, can be set to `large` `normal` | _string_ | - |
| maxlength | Max length of value | _number \| string_ | - |
| placeholder | Input placeholder | _string_ | - |
| border | Whether to show inner border | _boolean_ | `true` |
| disabled | Whether to disable field | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| colon | Whether to display colon after label | _boolean_ | `false` |
| required | Whether to show required mark | _boolean \| 'auto'_ | `null` |
| center | Whether to center content vertically | _boolean_ | `true` |
| clearable | Whether to be clearable | _boolean_ | `false` |
| clear-icon | Clear icon name | _string_ | `clear` |
| clear-trigger | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _FieldClearTrigger_ | `focus` |
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
| is-link | Whether to show link icon | _boolean_ | `false` |
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
| show-word-limit | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` |
| error | Whether to mark the input content in red | _boolean_ | `false` |
| error-message | Error message | _string_ | - |
| error-message-align | Error message align, can be set to `center` `right` | _FieldTextAlign_ | `left` |
| formatter | Input value formatter | _(val: string) => string_ | - |
| format-trigger | When to format value, can be set to `onBlur` | _FieldFormatTrigger_ | `onChange` |
| arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
| label-class | Label className | _string \| Array \| object_ | - |
| label-width | Label width | _number \| string_ | `6.2em` |
| label-alig
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
Vant移动端组件库 v4.8.5.zip (1568个子文件)
.browserslistrc 23B
md-loader.cjs 2KB
postcss.config.cjs 1KB
shared.cjs 395B
commit-msg 83B
commit-msg 83B
.editorconfig 214B
.eslintignore 25B
.eslintignore 25B
.eslintignore 4B
.eslintrc 625B
.eslintrc 95B
.gitignore 199B
.gitignore 11B
说明.htm 4KB
mobile.html 1KB
index.html 1KB
index.spec.js 14KB
lazy.js 12KB
index.spec.js 5KB
listener.js 5KB
index.js 5KB
config.js 4KB
index.spec.js 4KB
util.js 4KB
router.js 3KB
lazy-image.js 2KB
iframe-sync.js 2KB
router.js 2KB
lazy-container.js 2KB
index.js 2KB
lazy-component.js 1KB
index.js 1KB
index.js 929B
build.js 820B
vant.config.js 724B
main.js 608B
locales.js 575B
build.js 336B
main.js 309B
index.spec.js 206B
index.spec.js 199B
babel.config.js 55B
bin.js 43B
build.js 30B
build.js 30B
build.js 30B
build.js 30B
package.json 2KB
package.json 2KB
package.json 1KB
package.json 1KB
package.json 1KB
package.json 1KB
package.json 1KB
package.json 985B
package.json 966B
package.json 902B
package.json 570B
package.json 549B
tsconfig.declaration.json 292B
tsconfig.json 288B
tsconfig.json 262B
tsconfig.json 230B
tsconfig.json 204B
tsconfig.json 181B
tsconfig.json 181B
tsconfig.json 181B
tsconfig.json 181B
tsconfig.json 181B
tsconfig.json 84B
renovate.json5 648B
index.spec.jsx 8KB
index.spec.jsx 7KB
index.spec.jsx 5KB
index.spec.jsx 5KB
index.spec.jsx 2KB
encode-woff2.less 33KB
common.less 13KB
index.less 7KB
index.less 6KB
index.less 5KB
index.less 5KB
index.less 4KB
index.less 4KB
index.less 4KB
index.less 4KB
index.less 4KB
index.less 4KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
index.less 3KB
共 1568 条
- 1
- 2
- 3
- 4
- 5
- 6
- 16
资源评论
小小姑娘很大
- 粉丝: 4078
- 资源: 2321
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功