import{_ as a,a as s,q as e,k as t}from"./index.3fe853a6.js";const o={pageData:{title:"\u5347\u7EA7\u51C6\u5907",description:"",frontmatter:{},headers:[{level:2,title:"\u5347\u7EA7\u51C6\u5907",slug:"\u5347\u7EA7\u51C6\u5907",content:""},{level:2,title:"2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316",slug:"_2-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316",content:"\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574"},{level:3,title:"\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574",slug:"\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574",content:""},{level:3,title:"\u517C\u5BB9\u6027\u8C03\u6574",slug:"\u517C\u5BB9\u6027\u8C03\u6574",content:""},{level:2,title:"\u9047\u5230\u95EE\u9898",slug:"\u9047\u5230\u95EE\u9898",content:"v2 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 [GitHub issues](https://vuecomponent.github.io/issue-helper/) \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002"}],relativePath:"site/src/vueDocs/migration-v2.zh-CN.md",content:"\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue `1.x` \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue `2.x` \u7248\u672C\u3002\n\n## \u5347\u7EA7\u51C6\u5907\n\n1. \u8BF7\u5148\u5347\u7EA7\u5230 1.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\u3002\n2. \u5347\u7EA7\u9879\u76EE Vue 3.0 \u4EE5\u4E0A\u3002\n\n## 2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316\n\n### \u8BBE\u8BA1\u89C4\u8303\u8C03\u6574\n\n- \u884C\u9AD8\u4ECE `1.5`(`21px`) \u8C03\u6574\u4E3A `1.5715`(`22px`)\u3002\n- \u57FA\u7840\u5706\u89D2\u8C03\u6574\uFF0C\u7531`4px` \u6539\u4E3A `2px`\u3002\n- \u5206\u5272\u7EBF\u989C\u8272\u660E\u5EA6\u964D\u4F4E\uFF0C\u7531 `#E8E8E8` \u6539\u4E3A `#F0F0F0`\u3002\n- Table \u9ED8\u8BA4\u80CC\u666F\u989C\u8272\u4ECE\u900F\u660E\u4FEE\u6539\u4E3A\u767D\u8272\u3002\n\n### \u517C\u5BB9\u6027\u8C03\u6574\n\n- \u6D4F\u89C8\u5668\u4E0D\u518D\u517C\u5BB9 IE 11 \u53CA\u4EE5\u4E0B\u7248\u672C\u3002\n- Vue \u6700\u4F4E\u652F\u6301\u7248\u672C\u4E3A Vue 3.0\u3002\n\n#### \u8C03\u6574\u7684 API\n\n- \u79FB\u9664\u4E86 LocaleProvider\uFF0C\u8BF7\u4F7F\u7528 `ConfigProvider` \u66FF\u4EE3\u3002\n- \u79FB\u9664\u4E86 Tag \u7684 afterClose \u5C5E\u6027\u3002\n- \u5408\u5E76\u4E86 FormModel\u3001Form\uFF0C\u8BE6\u89C1\u4E0B\u65B9\u7684 Form \u91CD\u6784\u90E8\u5206\u3002\n- `tabIndex`\u3001`maxLength`\u3001`readOnly`\u3001`autoComplete`\u3001`autoFocus` \u66F4\u6539\u4E3A\u5168\u5C0F\u5199\u3002\n- \u4E3A\u4E86\u5728 template \u8BED\u6CD5\u4E2D\u66F4\u53CB\u597D\u7684\u4F7F\u7528\u63D2\u69FD\uFF0C\u6240\u6709\u6D89\u53CA\u5230 xxxRender, renderXxxx \u7684\u5747\u6539\u6210\u5355\u53C2\u6570\uFF0C\u6D89\u53CA\u5230 `itemRender`\u3001`renderItem`\u3001`customRender`\u3001`dropdownRender`\u3001`dateCellRender`\u3001`dateFullCellRender`\u3001`monthCellRender`\u3001`monthFullCellRender`\u3001`renderTabBar`\u3002\n- \u6240\u6709\u914D\u7F6E scopedSlots \u7684\u5730\u65B9\u7EDF\u4E00\u6539\u6210 slots\u3002\n- `{ on, props, attrs, ... }` \u914D\u7F6E\u8FDB\u884C\u6241\u5E73\u5316\u5904\u7406\uFF0C\u5982 `{ props: {type: 'xxx'}, on: {click: this.handleClick}}` \u6539\u6210 `{ type: 'xxx', onClick: this.handleClick }`, \u6D89\u53CA\u76F8\u5173\u5B57\u6BB5\uFF1A`okButtonProps`\u3001`cancelButtonProps`\u3002\n- xxx.sync \u6539\u6210 v-model:xxx\n- v-model \u66F4\u6539\u6210 v-model:xxx\uFF0C\u5177\u4F53\u6D89\u53CA\u7EC4\u4EF6\uFF1A\n\n - v-model \u6539\u6210 v-model:checked \u7684\u7EC4\u4EF6\u6709: CheckableTag\u3001Checkbox\u3001Switch\n - v-model \u6539\u6210 v-model:value \u7684\u7EC4\u4EF6\u6709: Radio\u3001Mentions\u3001CheckboxGroup\u3001Rate\u3001DatePicker\u3001Select\n - v-model \u6539\u6210 v-model:visible \u7684\u7EC4\u4EF6\u6709: Tag\u3001Popconfirm\u3001Popove\u3001Tooltip\u3001Moda\u3001Dropdown\n - v-model \u6539\u6210 v-model:activeKey \u7684\u7EC4\u4EF6\u6709: Collaps\u3001Tabs\n - v-model \u6539\u6210 v-model:current \u7684\u7EC4\u4EF6\u6709: Steps\n - v-model \u6539\u6210 v-model:selectedKeys \u7684\u7EC4\u4EF6\u6709: Menu\n\n#### \u56FE\u6807\u5347\u7EA7\n\n\u5728 `ant-design-vue@1.2.0` \u4E2D\uFF0C\u6211\u4EEC\u5F15\u5165\u4E86 svg \u56FE\u6807\uFF08[\u4E3A\u4F55\u4F7F\u7528 svg \u56FE\u6807\uFF1F](https://github.com/ant-design/ant-design/issues/10353)\uFF09\u3002\u4F7F\u7528\u4E86\u5B57\u7B26\u4E32\u547D\u540D\u7684\u56FE\u6807 API \u65E0\u6CD5\u505A\u5230\u6309\u9700\u52A0\u8F7D\uFF0C\u56E0\u800C\u5168\u91CF\u5F15\u5165\u4E86 svg \u56FE\u6807\u6587\u4EF6\uFF0C\u8FD9\u5927\u5927\u589E\u52A0\u4E86\u6253\u5305\u4EA7\u7269\u7684\u5C3A\u5BF8\u3002\u5728 2.0 \u4E2D\uFF0C\u6211\u4EEC\u8C03\u6574\u4E86\u56FE\u6807\u7684\u4F7F\u7528 API \u4ECE\u800C\u652F\u6301 tree shaking\uFF0C\u51CF\u5C11\u9ED8\u8BA4\u5305\u4F53\u79EF\u7EA6 150 KB(Gzipped)\u3002\n\n\u65E7\u7248 Icon \u4F7F\u7528\u65B9\u5F0F\u5C06\u88AB\u5E9F\u5F03\uFF1A\n\n```html\n<a-icon type="smile" />\n<a-button icon="smile" />\n```\n\n2.0 \u4E2D\u4F1A\u91C7\u7528\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\uFF1A\n\n```html\n<template>\n <smile-outlined />\n <a-button>\n <template #icon><smile-outlined /></template>\n </a-button>\n</template>\n<script>\n import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';\n export default {\n components: {\n SmileOutlined,\n },\n };\n</script>\n```\n\n#### \u7EC4\u4EF6\u91CD\u6784\n\n\u5728 1.x \u4E2D\u6211\u4EEC\u63D0\u4F9B\u4E86 Form\u3001FormModel \u4E24\u4E2A\u8868\u5355\u7EC4\u4EF6\uFF0C\u539F\u6709\u7684 Form \u7EC4\u4EF6\u4F7F\u7528 v-decorator \u8FDB\u884C\u6570\u636E\u7ED1\u5B9A\uFF0C\u5728 Vue2 \u4E2D\u6211\u4EEC\u901A\u8FC7\u4E0A\u4E0B\u6587\u8FDB\u884C\u5F3A\u5236\u66F4\u65B0\u7EC4\u4EF6\uFF0C\u4F46\u662F\u5728 Vue3 \u4E2D\uFF0C\u7531\u4E8E\u5F15\u5165 patchFlag \u7B49\u4F18\u5316\u65B9\u5F0F\uFF0C\u5F3A\u5236\u5237\u65B0\u4F1A\u7834\u574F patchFlag \u5E26\u6765\u7684\u6027\u80FD\u4F18\u52BF\u3002\u6240\u4EE5\u5728 2.0 \u7248\u672C\u4E2D\u6211\u4EEC\u5C06 Form\u3001FormModel \u8FDB\u884C\u5408\u5E76\uFF0C\u4FDD\u7559\u4E86 FormModel \u7684\u4F7F\u7528\u65B9\u5F0F\uFF0C\u4E30\u5BCC\u4E86\u76F8\u5173\u529F\u80FD\uFF0C\u5E76\u6539\u540D\u6210 Form\u3002\n\n\u6D89\u53CA\u6539\u52A8\uFF1A\n\n- Form \u65B0\u589E `scrollToFirstError`,`name`,`validateTrigger` \u5C5E\u6027\uFF0C\u65B0\u589E `finish`\u3001`finishFailed` \u4E8B\u4EF6\uFF0C\u65B0\u589E `scrollToField` \u65B9\u6CD5\u3002\n- Form.Item \u65B0\u589E `validateFirst`, `validateTrigger`, \u5E9F\u5F03 `prop` \u5C5E\u6027\uFF0C\u4F7F\u7528 `name` \u66FF\u6362\u3002\n- \u5D4C\u5957\u5B57\u6BB5\u8DEF\u5F84\u4F7F\u7528\u6570\u7EC4\uFF0C\u8FC7\u53BB\u7248\u672C\u6211\u4EEC\u901A\u8FC7 . \u4EE3\u8868\u5D4C\u5957\u8DEF\u5F84\uFF08\u8BF8\u5982 user.name \u6765\u4EE3\u8868 { user: { name: '' } }\uFF09\u3002\u7136\u800C\u5728\u4E00\u4E9B\u540E\u53F0\u7CFB\u7EDF\u4E2D\uFF0C\u53D8\u91CF\u540D\u4E2D\u4E5F\u4F1A\u5E26\u4E0A .\u3002\u8FD9\u9020\u6210\u7528\u6237\u9700\u8981\u989D\u5916\u7684\u4EE3\u7801\u8FDB\u884C\u8F6C\u5316\uFF0C\u56E0\u800C\u65B0\u7248\u4E2D\uFF0C\u5D4C\u5957\u8DEF\u5F84\u901A\u8FC7\u6570\u7EC4\u6765\u8868\u793A\u4EE5\u907F\u514D\u9519\u8BEF\u7684\u5904\u7406\u884C\u4E3A\uFF08\u5982 ['user', 'name']\uFF09\u3002\n- validateFields \u4E0D\u518D\u652F\u6301 callback\u3002validateFields \u4F1A\u8FD4\u56DE Promise \u5BF9\u8C61\uFF0C\u56E0\u800C\u4F60\u53EF\u4EE5\u901A\u8FC7 async/await \u6216\u8005 then/catch \u6765\u6267\u884C\u5BF9\u5E94\u7684\u9519\u8BEF\u5904\u7406\u3002\u4E0D\u518D\u9700\u8981\u5224\u65AD errors \u662F\u5426\u4E3A\u7A7A\uFF1A\n\n```js\n// v1\nvalidateFields((err, value) => {\n if (!err) {\n // Do something with value\n }\n});\n```\n\n\u6539\u6210\n\n```js\n// v2\nvalidateFields().then(values => {\n // Do something with value\n});\n```\n\n## \u9047\u5230\u95EE\u9898\n\nv2 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 [GitHub issues](https://vuecomponent.github.io/issue-helper/) \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002\n",html:`

\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue 1.x \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue 2.x \u7248\u672C\u3002

\u5347\u7EA7\u51C6\u5907

\u8BF7\u5148\u5347\u7EA7\u5230 1.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\u3002
\u5347\u7EA7\u9879\u76EE Vue 3.0 \u4EE5\u4E0A\u3002

2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316

\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574

\u884C\u9AD8\u4ECE 1.5(21px) \u8C03\u6574\u4E3A 1.5715(22px)\u3002
\u57FA\u7840\u5706\u89D2\u8C03\u6574\uFF0C\u75314px \u6539\u4E3A 2px\u3002
\u5206\u5272\u7EBF\u989C\u8272\u660E\u5EA6\u964D\u4F4E\uFF0C\u7531 #E8E8E8 \u6539\u4E3A #F0F0F0\u3002
Table \u9ED8\u8BA4\u80CC\u666F\u989C\u8272\u4ECE\u900F\u660E\u4FEE\u6539\u4E3A\u767D\u8272\u3002

\u517C\u5BB9\u6027\u8C03\u6574

\u6D4F\u89C8\u5668\u4E0D\u518D\u517C\u5BB9 IE 11 \u53CA\u4EE5\u4E0B\u7248\u672C\u3002
Vue \u6700\u4F4E\u652F\u6301\u7248\u672C\u4E3A Vue 3.0\u3002

\u8C03\u6574\u7684 API

\u79FB\u9664\u4E86 LocaleProvider\uFF0C\u8BF7\u4F7F\u7528 ConfigProvider \u66FF\u4EE3\u3002
\u79FB\u9664\u4E86 Tag \u7684 afterClose \u5C5E\u6027\u3002
\u5408\u5E76\u4E86 FormModel\u3001Form\uFF0C\u8BE6\u89C1\u4E0B\u65B9\u7684 Form \u91CD\u6784\u90E8\u5206\u3002
tabIndex\u3001maxLength\u3001readOnly\u3001autoComplete\u3001autoFocus \u66F4\u6539\u4E3A\u5168\u5C0F\u5199\u3002
\u4E3A\u4E86\u5728 template \u8BED\u6CD5\u4E2D\u66F4\u53CB\u597D\u7684\u4F7F\u7528\u63D2\u69FD\uFF0C\u6240\u6709\u6D89\u53CA\u5230 xxxRender, renderXxxx \u7684\u5747\u6539\u6210\u5355\u53C2\u6570\uFF0C\u6D89\u53CA\u5230 itemRender\u3001renderItem\u3001customRender\u3001dropdownRender\u3001dateCellRender\u3001dateFullCellRender\u3001monthCellRender\u3001monthFullCellRender\u3001renderTabBar\u3002
\u6240\u6709\u914D\u7F6E scopedSlots \u7684\u5730\u65B9\u7EDF\u4E00\u6539\u6210 slots\u3002
{ on, props, attrs, ... } \u914D\u7F6E\u8FDB\u884C\u6241\u5E73\u5316\u5904\u7406\uFF0C\u5982 { props: {type: 'xxx'}, on: {click: this.handleClick}} \u6539\u6210 { type: 'xxx', onClick: this.handleClick }, \u6D89\u53CA\u76F8\u5173\u5B57\u6BB5\uFF1AokButtonProps\u3001cancelButtonProps\u3002
xxx.sync \u6539\u6210 v-model:xxx
v-model \u66F4\u6539\u6210 v-model:xxx\uFF0C\u5177\u4F53\u6D89\u53CA\u7EC4\u4EF6\uFF1A
- v-model \u6539\u6210 v-model:checked \u7684\u7EC4\u4EF6\u6709: CheckableTag\u3001Checkbox\u3001Switch
- v-model \u6539\u6210 v-model:value \u7684\u7EC4\u4EF6\u6709: Radio\u3001Mentions\u3001CheckboxGroup\u3001Rate\u3001DatePicker\u3001Select
- v-model \u6539\u6210 v-model:visible \u7684\u7EC4\u4EF6\u6709: Tag\u3001Popconfirm\u3001Popove\u3001Tooltip\u3001Moda\u3001Dropdown
- v-model \u6539\u6210 v-model:activeKey \u7684\u7EC4\u4EF6\u6709: Collaps\u3001Tabs
- v-model \u6539\u6210 v-model:current \u7684\u7EC4\u4EF6\u6709: Steps
- v-model \u6539\u6210 v-model:selectedKeys \u7684\u7EC4\u4EF6\u6709: Menu

\u56FE\u6807\u5347\u7EA7

\u5728 ant-design-vue@1.2.0 \u4E2D\uFF0C\u6211\u4EEC\u5F15\u5165\u4E86 svg \u56FE\u6807\uFF08\u4E3A\u4F55\u4F7F\u7528 svg \u56FE\u6807\uFF1F\uFF09\u3002\u4F7F\u7528\u4E86\u5B57\u7B26\u4E32\u547D\u540D\u7684\u56FE\u6807 API \u65E0\u6CD5\u505A\u5230\u6309\u9700\u52A0\u8F7D\uFF0C\u56E0\u800C\u5168\u91CF\u5F15\u5165\u4E86 svg \u56FE\u6807\u6587\u4EF6\uFF0C\u8FD9\u5927\u5927\u589E\u52A0\u4E86\u6253\u5305\u4EA7\u7269\u7684\u5C3A\u5BF8\u3002\u5728 2.0 \u4E2D\uFF0C\u6211\u4EEC\u8C03\u6574\u4E86\u56FE\u6807\u7684\u4F7F\u7528 API \u4ECE\u800C\u652F\u6301 tree shaking\uFF0C\u51CF\u5C11\u9ED8\u8BA4\u5305\u4F53\u79EF\u7EA6 150 KB(Gzipped)\u3002

\u65E7\u7248 Icon \u4F7F\u7528\u65B9\u5F0F\u5C06\u88AB\u5E9F\u5F03\uFF1A

<a-icon type="smile" />
<a-button icon="smile" />

2.0 \u4E2D\u4F1A\u91C7\u7528\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\uFF1A

<template>
  <smile-outlined />
  <a-button>
    <template #icon><smile-outlined /></template>
  </a-button>
</template>
<script>
  import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';
  export default {
    components: {
      SmileOutlined,
    },
  };
</script>

\u7EC4\u4EF6\u91CD\u6784

\u5728 1.x \u4E2D\u6211\u4EEC\u63D0\u4F9B\u4E86 Form\u3001FormModel \u4E24\u4E2A\u8868\u5355\u7EC4\u4EF6\uFF0C\u539F\u6709\u7684 Form \u7EC4\u4EF6\u4F7F\u7528 v-decorator \u8FDB\u884C\u6570\u636E\u7ED1\u5B9A\uFF0C\u5728 Vue2 \u4E2D\u6211\u4EEC\u901A\u8FC7\u4E0A\u4E0B\u6587\u8FDB\u884C\u5F3A\u5236\u66F4\u65B0\u7EC4\u4EF6\uFF0C\u4F46\u662F\u5728 Vue3 \u4E2D\uFF0C\u7531\u4E8E\u5F15\u5165 patchFlag \u7B49\u4F18\u5316\u65B9\u5F0F\uFF0C\u5F3A\u5236\u5237\u65B0\u4F1A\u7834\u574F patchFlag \u5E26\u6765\u7684\u6027\u80FD\u4F18\u52BF\u3002\u6240\u4EE5\u5728 2.0 \u7248\u672C\u4E2D\u6211\u4EEC\u5C06 Form\u3001FormModel \u8FDB\u884C\u5408\u5E76\uFF0C\u4FDD\u7559\u4E86 FormModel \u7684\u4F7F\u7528\u65B9\u5F0F\uFF0C\u4E30\u5BCC\u4E86\u76F8\u5173\u529F\u80FD\uFF0C\u5E76\u6539\u540D\u6210 Form\u3002

\u6D89\u53CA\u6539\u52A8\uFF1A

Form \u65B0\u589E scrollToFirstError,name,validateTrigger \u5C5E\u6027\uFF0C\u65B0\u589E finish\u3001finishFailed \u4E8B\u4EF6\uFF0C\u65B0\u589E scrollToField \u65B9\u6CD5\u3002
Form.Item \u65B0\u589E validateFirst, validateTrigger, \u5E9F\u5F03 prop \u5C5E\u6027\uFF0C\u4F7F\u7528 name \u66FF\u6362\u3002
\u5D4C\u5957\u5B57\u6BB5\u8DEF\u5F84\u4F7F\u7528\u6570\u7EC4\uFF0C\u8FC7\u53BB\u7248\u672C\u6211\u4EEC\u901A\u8FC7 . \u4EE3\u8868\u5D4C\u5957\u8DEF\u5F84\uFF08\u8BF8\u5982 user.name \u6765\u4EE3\u8868 { user: { name: '' } }\uFF09\u3002\u7136\u800C\u5728\u4E00\u4E9B\u540E\u53F0\u7CFB\u7EDF\u4E2D\uFF0C\u53D8\u91CF\u540D\u4E2D\u4E5F\u4F1A\u5E26\u4E0A .\u3002\u8FD9\u9020\u6210\u7528\u6237\u9700\u8981\u989D\u5916\u7684\u4EE3\u7801\u8FDB\u884C\u8F6C\u5316\uFF0C\u56E0\u800C\u65B0\u7248\u4E2D\uFF0C\u5D4C\u5957\u8DEF\u5F84\u901A\u8FC7\u6570\u7EC4\u6765\u8868\u793A\u4EE5\u907F\u514D\u9519\u8BEF\u7684\u5904\u7406\u884C\u4E3A\uFF08\u5982 ['user', 'name']\uFF09\u3002
validateFields \u4E0D\u518D\u652F\u6301 callback\u3002validateFields \u4F1A\u8FD4\u56DE Promise \u5BF9\u8C61\uFF0C\u56E0\u800C\u4F60\u53EF\u4EE5\u901A\u8FC7 async/await \u6216\u8005 then/catch \u6765\u6267\u884C\u5BF9\u5E94\u7684\u9519\u8BEF\u5904\u7406\u3002\u4E0D\u518D\u9700\u8981\u5224\u65AD errors \u662F\u5426\u4E3A\u7A7A\uFF1A

// v1
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});

\u6539\u6210

// v2
validateFields().then(values => {
  // Do something with value
});

\u9047\u5230\u95EE\u9898

v2 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 GitHub issues \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002

`,lastUpdated:1748060269537}},p={class:"markdown"};function l(c,n,i,r,d,u){return t(),s("article",p,n[0]||(n[0]=[e(`

\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue 1.x \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue 2.x \u7248\u672C\u3002

\u5347\u7EA7\u51C6\u5907

\u8BF7\u5148\u5347\u7EA7\u5230 1.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\u3002
\u5347\u7EA7\u9879\u76EE Vue 3.0 \u4EE5\u4E0A\u3002

2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316

\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574

\u884C\u9AD8\u4ECE 1.5(21px) \u8C03\u6574\u4E3A 1.5715(22px)\u3002
\u57FA\u7840\u5706\u89D2\u8C03\u6574\uFF0C\u75314px \u6539\u4E3A 2px\u3002
\u5206\u5272\u7EBF\u989C\u8272\u660E\u5EA6\u964D\u4F4E\uFF0C\u7531 #E8E8E8 \u6539\u4E3A #F0F0F0\u3002
Table \u9ED8\u8BA4\u80CC\u666F\u989C\u8272\u4ECE\u900F\u660E\u4FEE\u6539\u4E3A\u767D\u8272\u3002

\u517C\u5BB9\u6027\u8C03\u6574

\u6D4F\u89C8\u5668\u4E0D\u518D\u517C\u5BB9 IE 11 \u53CA\u4EE5\u4E0B\u7248\u672C\u3002
Vue \u6700\u4F4E\u652F\u6301\u7248\u672C\u4E3A Vue 3.0\u3002

\u8C03\u6574\u7684 API

\u79FB\u9664\u4E86 LocaleProvider\uFF0C\u8BF7\u4F7F\u7528 ConfigProvider \u66FF\u4EE3\u3002
\u79FB\u9664\u4E86 Tag \u7684 afterClose \u5C5E\u6027\u3002
\u5408\u5E76\u4E86 FormModel\u3001Form\uFF0C\u8BE6\u89C1\u4E0B\u65B9\u7684 Form \u91CD\u6784\u90E8\u5206\u3002
tabIndex\u3001maxLength\u3001readOnly\u3001autoComplete\u3001autoFocus \u66F4\u6539\u4E3A\u5168\u5C0F\u5199\u3002
\u4E3A\u4E86\u5728 template \u8BED\u6CD5\u4E2D\u66F4\u53CB\u597D\u7684\u4F7F\u7528\u63D2\u69FD\uFF0C\u6240\u6709\u6D89\u53CA\u5230 xxxRender, renderXxxx \u7684\u5747\u6539\u6210\u5355\u53C2\u6570\uFF0C\u6D89\u53CA\u5230 itemRender\u3001renderItem\u3001customRender\u3001dropdownRender\u3001dateCellRender\u3001dateFullCellRender\u3001monthCellRender\u3001monthFullCellRender\u3001renderTabBar\u3002
\u6240\u6709\u914D\u7F6E scopedSlots \u7684\u5730\u65B9\u7EDF\u4E00\u6539\u6210 slots\u3002
{ on, props, attrs, ... } \u914D\u7F6E\u8FDB\u884C\u6241\u5E73\u5316\u5904\u7406\uFF0C\u5982 { props: {type: 'xxx'}, on: {click: this.handleClick}} \u6539\u6210 { type: 'xxx', onClick: this.handleClick }, \u6D89\u53CA\u76F8\u5173\u5B57\u6BB5\uFF1AokButtonProps\u3001cancelButtonProps\u3002
xxx.sync \u6539\u6210 v-model:xxx
v-model \u66F4\u6539\u6210 v-model:xxx\uFF0C\u5177\u4F53\u6D89\u53CA\u7EC4\u4EF6\uFF1A
- v-model \u6539\u6210 v-model:checked \u7684\u7EC4\u4EF6\u6709: CheckableTag\u3001Checkbox\u3001Switch
- v-model \u6539\u6210 v-model:value \u7684\u7EC4\u4EF6\u6709: Radio\u3001Mentions\u3001CheckboxGroup\u3001Rate\u3001DatePicker\u3001Select
- v-model \u6539\u6210 v-model:visible \u7684\u7EC4\u4EF6\u6709: Tag\u3001Popconfirm\u3001Popove\u3001Tooltip\u3001Moda\u3001Dropdown
- v-model \u6539\u6210 v-model:activeKey \u7684\u7EC4\u4EF6\u6709: Collaps\u3001Tabs
- v-model \u6539\u6210 v-model:current \u7684\u7EC4\u4EF6\u6709: Steps
- v-model \u6539\u6210 v-model:selectedKeys \u7684\u7EC4\u4EF6\u6709: Menu

\u56FE\u6807\u5347\u7EA7

\u65E7\u7248 Icon \u4F7F\u7528\u65B9\u5F0F\u5C06\u88AB\u5E9F\u5F03\uFF1A

<a-icon type="smile" />
<a-button icon="smile" />

2.0 \u4E2D\u4F1A\u91C7\u7528\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\uFF1A

<template>
  <smile-outlined />
  <a-button>
    <template #icon><smile-outlined /></template>
  </a-button>
</template>
<script>
  import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';
  export default {
    components: {
      SmileOutlined,
    },
  };
</script>

\u7EC4\u4EF6\u91CD\u6784

\u6D89\u53CA\u6539\u52A8\uFF1A

Form \u65B0\u589E scrollToFirstError,name,validateTrigger \u5C5E\u6027\uFF0C\u65B0\u589E finish\u3001finishFailed \u4E8B\u4EF6\uFF0C\u65B0\u589E scrollToField \u65B9\u6CD5\u3002
Form.Item \u65B0\u589E validateFirst, validateTrigger, \u5E9F\u5F03 prop \u5C5E\u6027\uFF0C\u4F7F\u7528 name \u66FF\u6362\u3002
\u5D4C\u5957\u5B57\u6BB5\u8DEF\u5F84\u4F7F\u7528\u6570\u7EC4\uFF0C\u8FC7\u53BB\u7248\u672C\u6211\u4EEC\u901A\u8FC7 . \u4EE3\u8868\u5D4C\u5957\u8DEF\u5F84\uFF08\u8BF8\u5982 user.name \u6765\u4EE3\u8868 { user: { name: '' } }\uFF09\u3002\u7136\u800C\u5728\u4E00\u4E9B\u540E\u53F0\u7CFB\u7EDF\u4E2D\uFF0C\u53D8\u91CF\u540D\u4E2D\u4E5F\u4F1A\u5E26\u4E0A .\u3002\u8FD9\u9020\u6210\u7528\u6237\u9700\u8981\u989D\u5916\u7684\u4EE3\u7801\u8FDB\u884C\u8F6C\u5316\uFF0C\u56E0\u800C\u65B0\u7248\u4E2D\uFF0C\u5D4C\u5957\u8DEF\u5F84\u901A\u8FC7\u6570\u7EC4\u6765\u8868\u793A\u4EE5\u907F\u514D\u9519\u8BEF\u7684\u5904\u7406\u884C\u4E3A\uFF08\u5982 ['user', 'name']\uFF09\u3002
validateFields \u4E0D\u518D\u652F\u6301 callback\u3002validateFields \u4F1A\u8FD4\u56DE Promise \u5BF9\u8C61\uFF0C\u56E0\u800C\u4F60\u53EF\u4EE5\u901A\u8FC7 async/await \u6216\u8005 then/catch \u6765\u6267\u884C\u5BF9\u5E94\u7684\u9519\u8BEF\u5904\u7406\u3002\u4E0D\u518D\u9700\u8981\u5224\u65AD errors \u662F\u5426\u4E3A\u7A7A\uFF1A

// v1
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});

\u6539\u6210

// v2
validateFields().then(values => {
  // Do something with value
});

\u9047\u5230\u95EE\u9898

`,25)]))}const m=a(o,[["render",l]]);export{m as default};

\u5347\u7EA7\u51C6\u5907 #

2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316 #

\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574 #

\u517C\u5BB9\u6027\u8C03\u6574 #

\u8C03\u6574\u7684 API #

\u56FE\u6807\u5347\u7EA7 #

\u7EC4\u4EF6\u91CD\u6784 #

\u9047\u5230\u95EE\u9898 #

\u5347\u7EA7\u51C6\u5907 #

2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316 #

\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574 #

\u517C\u5BB9\u6027\u8C03\u6574 #

\u8C03\u6574\u7684 API #

\u56FE\u6807\u5347\u7EA7 #

\u7EC4\u4EF6\u91CD\u6784 #

\u9047\u5230\u95EE\u9898 #

\u5347\u7EA7\u51C6\u5907

2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316

\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574

\u517C\u5BB9\u6027\u8C03\u6574

\u8C03\u6574\u7684 API

\u56FE\u6807\u5347\u7EA7

\u7EC4\u4EF6\u91CD\u6784

\u9047\u5230\u95EE\u9898

\u5347\u7EA7\u51C6\u5907

2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316

\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574

\u517C\u5BB9\u6027\u8C03\u6574

\u8C03\u6574\u7684 API

\u56FE\u6807\u5347\u7EA7

\u7EC4\u4EF6\u91CD\u6784

\u9047\u5230\u95EE\u9898