/*! For license information please see 8057.7d5dae30.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["8057"],{69086:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Field \u8F93\u5165\u6846

\n

\u4ECB\u7ECD

\n

\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Field);\napp.use(CellGroup);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u53EF\u4EE5\u901A\u8FC7 v-model \u53CC\u5411\u7ED1\u5B9A\u8F93\u5165\u6846\u7684\u503C\uFF0C\u901A\u8FC7 placeholder \u8BBE\u7F6E\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002

\n
<!-- \u53EF\u4EE5\u4F7F\u7528 CellGroup \u4F5C\u4E3A\u5BB9\u5668 -->\n<van-cell-group inset>\n  <van-field v-model="value" label="\u6587\u672C" placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D" />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n    return { value };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u7C7B\u578B

\n

\u6839\u636E type \u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\uFF0C\u9ED8\u8BA4\u503C\u4E3A text\u3002

\n
<van-cell-group inset>\n  <!-- \u8F93\u5165\u4EFB\u610F\u6587\u672C -->\n  <van-field v-model="text" label="\u6587\u672C" />\n  <!-- \u8F93\u5165\u624B\u673A\u53F7\uFF0C\u8C03\u8D77\u624B\u673A\u53F7\u952E\u76D8 -->\n  <van-field v-model="tel" type="tel" label="\u624B\u673A\u53F7" />\n  <!-- \u5141\u8BB8\u8F93\u5165\u6B63\u6574\u6570\uFF0C\u8C03\u8D77\u7EAF\u6570\u5B57\u952E\u76D8 -->\n  <van-field v-model="digit" type="digit" label="\u6574\u6570" />\n  <!-- \u5141\u8BB8\u8F93\u5165\u6570\u5B57\uFF0C\u8C03\u8D77\u5E26\u7B26\u53F7\u7684\u7EAF\u6570\u5B57\u952E\u76D8 -->\n  <van-field v-model="number" type="number" label="\u6570\u5B57" />\n  <!-- \u8F93\u5165\u5BC6\u7801 -->\n  <van-field v-model="password" type="password" label="\u5BC6\u7801" />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const tel = ref('');\n    const text = ref('');\n    const digit = ref('');\n    const number = ref('');\n    const password = ref('');\n\n    return { tel, text, digit, number, password };\n  },\n};\n
\n

\u7981\u7528\u8F93\u5165\u6846

\n

\u901A\u8FC7 readonly \u5C06\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u901A\u8FC7 disabled \u5C06\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002

\n
<van-cell-group inset>\n  <van-field label="\u6587\u672C" model-value="\u8F93\u5165\u6846\u53EA\u8BFB" readonly />\n  <van-field label="\u6587\u672C" model-value="\u8F93\u5165\u6846\u5DF2\u7981\u7528" disabled />\n</van-cell-group>\n
\n

\u663E\u793A\u56FE\u6807

\n

\u901A\u8FC7 left-icon \u548C right-icon \u914D\u7F6E\u8F93\u5165\u6846\u4E24\u4FA7\u7684\u56FE\u6807\uFF0C\u901A\u8FC7\u8BBE\u7F6E clearable \u5728\u8F93\u5165\u8FC7\u7A0B\u4E2D\u5C55\u793A\u6E05\u9664\u56FE\u6807\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="value1"\n    label="\u6587\u672C"\n    left-icon="smile-o"\n    right-icon="warning-o"\n    placeholder="\u663E\u793A\u56FE\u6807"\n  />\n  <van-field\n    v-model="value2"\n    clearable\n    label="\u6587\u672C"\n    left-icon="music-o"\n    placeholder="\u663E\u793A\u6E05\u9664\u56FE\u6807"\n  />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref('');\n    const value2 = ref('123');\n    return {\n      value1,\n      value2,\n    };\n  },\n};\n
\n

\u5FC5\u586B\u661F\u53F7

\n

\u8BBE\u7F6E required \u5C5E\u6027\u6765\u5C55\u793A\u5FC5\u586B\u661F\u53F7\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="username"\n    required\n    label="\u7528\u6237\u540D"\n    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n  />\n  <van-field\n    v-model="phone"\n    required\n    label="\u624B\u673A\u53F7"\n    placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n  />\n</van-cell-group>\n
\n

\u8BF7\u6CE8\u610F required \u5C5E\u6027\u53EA\u7528\u4E8E\u63A7\u5236\u6837\u5F0F\u5C55\u793A\uFF0C\u5728\u8FDB\u884C\u8868\u5355\u6821\u9A8C\u65F6\uFF0C\u9700\u8981\u4F7F\u7528 rule.required \u9009\u9879\u6765\u63A7\u5236\u6821\u9A8C\u903B\u8F91\u3002

\n

\u81EA\u52A8\u5C55\u793A\u661F\u53F7

\n

\u4F60\u53EF\u4EE5\u5728 Form \u7EC4\u4EF6\u4E0A\u8BBE\u7F6E required="auto"\uFF0C\u6B64\u65F6 Form \u91CC\u7684\u6240\u6709 Field \u4F1A\u81EA\u52A8\u6839\u636E rule.required \u6765\u5224\u65AD\u662F\u5426\u9700\u8981\u5C55\u793A\u661F\u53F7\u3002

\n
<van-form required="auto">\n  <van-field\n    v-model="username"\n    :rules="[{ required: true }]"\n    label="\u7528\u6237\u540D"\n    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n  />\n  <van-field\n    v-model="phone"\n    :rules="[{ required: false }]"\n    label="\u624B\u673A\u53F7"\n    placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n  />\n</van-form>\n
\n

\u9519\u8BEF\u63D0\u793A

\n

\u8BBE\u7F6E required \u5C5E\u6027\u8868\u793A\u8FD9\u662F\u4E00\u4E2A\u5FC5\u586B\u9879\uFF0C\u53EF\u4EE5\u914D\u5408 error \u6216 error-message \u5C5E\u6027\u663E\u793A\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="username"\n    error\n    label="\u7528\u6237\u540D"\n    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n  />\n  <van-field\n    v-model="phone"\n    label="\u624B\u673A\u53F7"\n    placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n    error-message="\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF"\n  />\n</van-cell-group>\n
\n

\u63D2\u5165\u6309\u94AE

\n

\u901A\u8FC7 button \u63D2\u69FD\u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="sms"\n    center\n    clearable\n    label="\u77ED\u4FE1\u9A8C\u8BC1\u7801"\n    placeholder="\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801"\n  >\n    <template #button>\n      <van-button size="small" type="primary">\u53D1\u9001\u9A8C\u8BC1\u7801</van-button>\n    </template>\n  </van-field>\n</van-cell-group>\n
\n

\u683C\u5F0F\u5316\u8F93\u5165\u5185\u5BB9

\n

\u901A\u8FC7 formatter \u5C5E\u6027\u53EF\u4EE5\u5BF9\u8F93\u5165\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316\uFF0C\u901A\u8FC7 format-trigger \u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u6267\u884C\u683C\u5F0F\u5316\u7684\u65F6\u673A\uFF0C\u9ED8\u8BA4\u5728\u8F93\u5165\u65F6\u8FDB\u884C\u683C\u5F0F\u5316\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="value1"\n    label="\u6587\u672C"\n    :formatter="formatter"\n    placeholder="\u5728\u8F93\u5165\u65F6\u6267\u884C\u683C\u5F0F\u5316"\n  />\n  <van-field\n    v-model="value2"\n    label="\u6587\u672C"\n    :formatter="formatter"\n    format-trigger="onBlur"\n    placeholder="\u5728\u5931\u7126\u65F6\u6267\u884C\u683C\u5F0F\u5316"\n  />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref('');\n    const value2 = ref('');\n    // \u8FC7\u6EE4\u8F93\u5165\u7684\u6570\u5B57\n    const formatter = (value) => value.replace(/\\d/g, '');\n\n    return {\n      value1,\n      value2,\n      formatter,\n    };\n  },\n};\n
\n

\u9AD8\u5EA6\u81EA\u9002\u5E94

\n

\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7 autosize \u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="message"\n    rows="1"\n    autosize\n    label="\u7559\u8A00"\n    type="textarea"\n    placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"\n  />\n</van-cell-group>\n
\n

\u663E\u793A\u5B57\u6570\u7EDF\u8BA1

\n

\u8BBE\u7F6E maxlength \u548C show-word-limit \u5C5E\u6027\u540E\u4F1A\u5728\u5E95\u90E8\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="message"\n    rows="2"\n    autosize\n    label="\u7559\u8A00"\n    type="textarea"\n    maxlength="50"\n    placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"\n    show-word-limit\n  />\n</van-cell-group>\n
\n

\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50

\n

\u901A\u8FC7 input-align \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u8F93\u5165\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center\u3001right\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="value"\n    label="\u6587\u672C"\n    placeholder="\u8F93\u5165\u6846\u5185\u5BB9\u53F3\u5BF9\u9F50"\n    input-align="right"\n  />\n</van-cell-group>\n
\n

\u8F93\u5165\u6846\u6587\u672C\u4F4D\u7F6E

\n

\u901A\u8FC7 label-align \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u8F93\u5165\u6846\u6587\u672C\u7684\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A center\u3001right\u3001top\u3002

\n
<van-cell-group inset>\n  <van-field\n    v-model="value"\n    label="\u6587\u672C"\n    placeholder="\u9876\u90E8\u5BF9\u9F50"\n    label-align="top"\n  />\n  <van-field\n    v-model="value2"\n    label="\u6587\u672C"\n    placeholder="\u5DE6\u5BF9\u9F50"\n    label-align="left"\n  />\n  <van-field\n    v-model="value3"\n    label="\u6587\u672C"\n    placeholder="\u5C45\u4E2D\u5BF9\u9F50"\n    label-align="center"\n  />\n  <van-field\n    v-model="value4"\n    label="\u6587\u672C"\n    placeholder="\u53F3\u5BF9\u9F50"\n    label-align="right"\n  />\n</van-cell-group>\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F53\u524D\u8F93\u5165\u7684\u503Cnumber | string-
label\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672Cstring-
name\u540D\u79F0\uFF0C\u4F5C\u4E3A\u63D0\u4EA4\u8868\u5355\u65F6\u7684\u6807\u8BC6\u7B26string-
id\u8F93\u5165\u6846 id\uFF0C\u540C\u65F6\u4F1A\u8BBE\u7F6E label \u7684 for \u5C5E\u6027stringvan-field-n-input
type\u8F93\u5165\u6846\u7C7B\u578B, \u652F\u6301\u539F\u751F input \u6807\u7B7E\u7684\u6240\u6709 type \u5C5E\u6027\uFF0C\u989D\u5916\u652F\u6301\u4E86 digit \u7C7B\u578BFieldTypetext
size\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large normalstring-
maxlength\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570number | string-
placeholder\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57string-
border\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846booleantrue
disabled\u662F\u5426\u7981\u7528\u8F93\u5165\u6846booleanfalse
readonly\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u8F93\u5165\u5185\u5BB9booleanfalse
colon\u662F\u5426\u5728 label \u540E\u9762\u6DFB\u52A0\u5192\u53F7booleanfalse
required\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7boolean | \'auto\'null
center\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2Dbooleanfalse
clearable\u662F\u5426\u542F\u7528\u6E05\u9664\u56FE\u6807\uFF0C\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4F1A\u6E05\u7A7A\u8F93\u5165\u6846booleanfalse
clear-icon\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringclear
clear-trigger\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C
focus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A		FieldClearTriggerfocus
clickable\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
is-link\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
autofocus\u662F\u5426\u81EA\u52A8\u805A\u7126\uFF0CiOS \u7CFB\u7EDF\u4E0D\u652F\u6301\u8BE5\u5C5E\u6027booleanfalse
show-word-limit\u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6E maxlength \u5C5E\u6027booleanfalse
error\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2booleanfalse
error-message\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793Astring-
error-message-align\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightFieldTextAlignleft
formatter\u8F93\u5165\u5185\u5BB9\u683C\u5F0F\u5316\u51FD\u6570(val: string) => string-
format-trigger\u683C\u5F0F\u5316\u51FD\u6570\u89E6\u53D1\u7684\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onBlurFieldFormatTriggeronChange
arrow-direction\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up downstringright
label-class\u5DE6\u4FA7\u6587\u672C\u989D\u5916\u7C7B\u540Dstring | Array | object-
label-width\u5DE6\u4FA7\u6587\u672C\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string6.2em
label-align\u5DE6\u4FA7\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right topFieldTextAlignleft
input-align\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightFieldTextAlignleft
autosize\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C
\u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C
\u5355\u4F4D\u4E3Apx		boolean | FieldAutosizeConfigfalse
left-icon\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027string-
right-icon\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027string-
icon-prefix\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027stringvan-icon
rules\u8868\u5355\u6821\u9A8C\u89C4\u5219\uFF0C\u8BE6\u89C1 Form \u7EC4\u4EF6FieldRule[]-
autocompleteHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u81EA\u52A8\u5B8C\u6210\u529F\u80FD\uFF0C\u8BE6\u89C1 MDN - autocompletestring-
autocapitalize v4.6.2HTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u6587\u672C\u8F93\u5165\u65F6\u662F\u5426\u81EA\u52A8\u5927\u5199\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - autocapitalizestring-
enterkeyhintHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u56DE\u8F66\u952E\u6837\u5F0F\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - enterkeyhint
string-
spellcheck v4.6.2HTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u68C0\u67E5\u5143\u7D20\u7684\u62FC\u5199\u9519\u8BEF\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - spellcheck
boolean-
autocorrect v4.6.2\u4EC5 Safari \u9002\u7528\uFF0C\u7528\u4E8E\u81EA\u52A8\u66F4\u6B63\u8F93\u5165\u7684\u6587\u672C\uFF0C\u8BE6\u89C1 MDN - autocorrect
string-
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
update:model-value\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1value: string (\u5F53\u524D\u8F93\u5165\u7684\u503C)
focus\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1event: Event
blur\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1event: Event
clear\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u65F6\u89E6\u53D1event: MouseEvent
click\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1event: MouseEvent
click-input\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1event: MouseEvent
click-left-icon\u70B9\u51FB\u5DE6\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1event: MouseEvent
click-right-icon\u70B9\u51FB\u53F3\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1event: MouseEvent
start-validate\u5F00\u59CB\u8868\u5355\u6821\u9A8C\u65F6\u89E6\u53D1-
end-validate\u7ED3\u675F\u8868\u5355\u6821\u9A8C\u65F6\u89E6\u53D1{ status: string, message: string }
\n

\u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Field \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
focus\u83B7\u53D6\u8F93\u5165\u6846\u7126\u70B9--
blur\u53D6\u6D88\u8F93\u5165\u6846\u7126\u70B9--
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type {\n  FieldType,\n  FieldRule,\n  FieldProps,\n  FieldInstance,\n  FieldTextAlign,\n  FieldRuleMessage,\n  FieldClearTrigger,\n  FieldFormatTrigger,\n  FieldRuleValidator,\n  FieldRuleFormatter,\n  FieldValidateError,\n  FieldAutosizeConfig,\n  FieldValidateTrigger,\n  FieldValidationStatus,\n} from 'vant';\n
\n

FieldInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

\n
import { ref } from 'vue';\nimport type { FieldInstance } from 'vant';\n\nconst fieldRef = ref<FieldInstance>();\n\nfieldRef.value?.focus();\n
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E\u53C2\u6570
label\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C-
input\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\uFF0C\u4F7F\u7528\u6B64\u63D2\u69FD\u540E\uFF0C\u4E0E\u8F93\u5165\u6846\u76F8\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u5C06\u5931\u6548-
left-icon\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807-
right-icon\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807-
button\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE-
error-message\u81EA\u5B9A\u4E49\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848{ message: string }
extra\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6700\u53F3\u4FA7\u7684\u989D\u5916\u5185\u5BB9-
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-field-label-width6.2em-
--van-field-label-colorvar(--van-text-color)-
--van-field-label-margin-rightvar(--van-padding-sm)-
--van-field-input-text-colorvar(--van-text-color)-
--van-field-input-error-text-colorvar(--van-danger-color)-
--van-field-input-disabled-text-colorvar(--van-text-color-3)-
--van-field-placeholder-text-colorvar(--van-text-color-3)-
--van-field-icon-size18px-
--van-field-clear-icon-size18px-
--van-field-clear-icon-colorvar(--van-gray-5)-
--van-field-right-icon-colorvar(--van-gray-6)-
--van-field-error-message-colorvar(--van-danger-color)-
--van-field-error-message-font-size12px-
--van-field-text-area-min-height60px-
--van-field-word-limit-colorvar(--van-gray-7)-
--van-field-word-limit-font-sizevar(--van-font-size-sm)-
--van-field-word-limit-line-height16px-
--van-field-disabled-text-colorvar(--van-text-color-3)-
--van-field-required-mark-colorvar(--van-red)-
\n

\u5E38\u89C1\u95EE\u9898

\n

\u8BBE\u7F6E type \u4E3A number \u540E\uFF0C\u4E3A\u4EC0\u4E48 input \u6807\u7B7E\u7684\u7C7B\u578B\u4ECD\u4E3A text?

\n

HTML \u539F\u751F\u7684 type="number" \u5C5E\u6027\u5728 iOS \u548C Android \u7CFB\u7EDF\u4E0A\u90FD\u5B58\u5728\u4E00\u5B9A\u95EE\u9898\uFF0C\u6BD4\u5982 maxlength \u5C5E\u6027\u4E0D\u751F\u6548\u3001\u65E0\u6CD5\u83B7\u53D6\u5230\u5B8C\u6574\u7684\u8F93\u5165\u5185\u5BB9\u7B49\u3002\u56E0\u6B64\u8BBE\u7F6E type \u4E3A number \u65F6\uFF0CField \u4E0D\u4F1A\u4F7F\u7528\u539F\u751F\u7684 type="number" \u5C5E\u6027\uFF0C\u800C\u662F\u7528\u73B0\u4EE3\u6D4F\u89C8\u5668\u652F\u6301\u7684 inputmode \u5C5E\u6027\u6765\u63A7\u5236\u8F93\u5165\u952E\u76D8\u7684\u7C7B\u578B\u3002

\n

\u4E3A\u4EC0\u4E48 v-model \u7ED1\u5B9A\u7684\u503C\u88AB\u66F4\u65B0\u4E3A string \u7C7B\u578B\uFF1F

\n

Field \u7EC4\u4EF6\u5185\u90E8\u4F1A\u5C06\u4F20\u5165\u7684 v-model \u683C\u5F0F\u5316\u4E3A string \u7C7B\u578B\uFF0C\u4FBF\u4E8E\u7EC4\u4EF6\u5185\u90E8\u8FDB\u884C\u5904\u7406\u3002

\n

\u5982\u679C\u4F60\u5E0C\u671B\u5728 v-model \u4E0A\u7ED1\u5B9A number \u7C7B\u578B\uFF0C\u53EF\u4EE5\u4F7F\u7528 Vue \u63D0\u4F9B\u7684 .number \u4FEE\u9970\u7B26\u3002

\n
<van-field v-model.number="value" type="tel" />\n
\n

\u5728\u684C\u9762\u7AEF\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u65E0\u6548\uFF1F

\n

\u6E05\u9664\u6309\u94AE\u76D1\u542C\u662F\u7684\u79FB\u52A8\u7AEF Touch \u4E8B\u4EF6\uFF0C\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002

\n
'},null,8,l))}}}]);