vant-开发设计学习记录

# 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