首頁 探索 說明
註冊 登入
wicresoft
/
doc_project
2
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
目錄樹: 9cd9c7d1d5
分支列表 標籤列表
doc_project
/
3x.antv.design
/
assets
/
migration-v2.zh-CN.8645e0ad.js

migration-v2.zh-CN.8645e0ad.js 36 KB
文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 
  1. 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: &#39;xxx&#39;}, on: {click: this.handleClick}}` \u6539\u6210 `{ type: &#39;xxx&#39;, 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&lt;a-icon type=&quot;smile&quot; /&gt;\n&lt;a-button icon=&quot;smile&quot; /&gt;\n```\n\n2.0 \u4E2D\u4F1A\u91C7\u7528\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\uFF1A\n\n```html\n&lt;template&gt;\n  &lt;smile-outlined /&gt;\n  &lt;a-button&gt;\n    &lt;template #icon&gt;&lt;smile-outlined /&gt;&lt;/template&gt;\n  &lt;/a-button&gt;\n&lt;/template&gt;\n&lt;script&gt;\n  import SmileOutlined from &#39;@ant-design/icons-vue/SmileOutlined&#39;;\n  export default {\n    components: {\n      SmileOutlined,\n    },\n  };\n&lt;/script&gt;\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: &#39;&#39; } }\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 [&#39;user&#39;, &#39;name&#39;]\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) =&gt; {\n  if (!err) {\n    // Do something with value\n  }\n});\n```\n\n\u6539\u6210\n\n```js\n// v2\nvalidateFields().then(values =&gt; {\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:`<p>\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue <code>1.x</code> \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue <code>2.x</code> \u7248\u672C\u3002</p>
    2. 

  2. <h2 id="\u5347\u7EA7\u51C6\u5907">\u5347\u7EA7\u51C6\u5907 <a class="header-anchor" href="#\u5347\u7EA7\u51C6\u5907">
    3. 

  3.           <span aria-hidden="true" class="anchor">#</span>
    4. 

  4.         </a></h2>
    5. 

  5. <ol>
    6. 

  6. <li>\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</li>
    7. 

  7. <li>\u5347\u7EA7\u9879\u76EE Vue 3.0 \u4EE5\u4E0A\u3002</li>
    8. 

  8. </ol>
    9. 

  9. <h2 id="_2-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316">2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316 <a class="header-anchor" href="#_2-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316">
    10. 

  10.           <span aria-hidden="true" class="anchor">#</span>
    11. 

  11.         </a></h2>
    12. 

  12. <h3 id="\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574">\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574 <a class="header-anchor" href="#\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574">
    13. 

  13.           <span aria-hidden="true" class="anchor">#</span>
    14. 

  14.         </a></h3>
    15. 

  15. <ul>
    16. 

  16. <li>\u884C\u9AD8\u4ECE <code>1.5</code>(<code>21px</code>) \u8C03\u6574\u4E3A <code>1.5715</code>(<code>22px</code>)\u3002</li>
    17. 

  17. <li>\u57FA\u7840\u5706\u89D2\u8C03\u6574\uFF0C\u7531<code>4px</code> \u6539\u4E3A <code>2px</code>\u3002</li>
    18. 

  18. <li>\u5206\u5272\u7EBF\u989C\u8272\u660E\u5EA6\u964D\u4F4E\uFF0C\u7531 <code>#E8E8E8</code> \u6539\u4E3A <code>#F0F0F0</code>\u3002</li>
    19. 

  19. <li>Table \u9ED8\u8BA4\u80CC\u666F\u989C\u8272\u4ECE\u900F\u660E\u4FEE\u6539\u4E3A\u767D\u8272\u3002</li>
    20. 

  20. </ul>
    21. 

  21. <h3 id="\u517C\u5BB9\u6027\u8C03\u6574">\u517C\u5BB9\u6027\u8C03\u6574 <a class="header-anchor" href="#\u517C\u5BB9\u6027\u8C03\u6574">
    22. 

  22.           <span aria-hidden="true" class="anchor">#</span>
    23. 

  23.         </a></h3>
    24. 

  24. <ul>
    25. 

  25. <li>\u6D4F\u89C8\u5668\u4E0D\u518D\u517C\u5BB9 IE 11 \u53CA\u4EE5\u4E0B\u7248\u672C\u3002</li>
    26. 

  26. <li>Vue \u6700\u4F4E\u652F\u6301\u7248\u672C\u4E3A Vue 3.0\u3002</li>
    27. 

  27. </ul>
    28. 

  28. <h4 id="\u8C03\u6574\u7684-API">\u8C03\u6574\u7684 API <a class="header-anchor" href="#\u8C03\u6574\u7684-API">
    29. 

  29.           <span aria-hidden="true" class="anchor">#</span>
    30. 

  30.         </a></h4>
    31. 

  31. <ul>
    32. 

  32. <li>
    33. 

  33. <p>\u79FB\u9664\u4E86 LocaleProvider\uFF0C\u8BF7\u4F7F\u7528 <code>ConfigProvider</code> \u66FF\u4EE3\u3002</p>
    34. 

  34. </li>
    35. 

  35. <li>
    36. 

  36. <p>\u79FB\u9664\u4E86 Tag \u7684 afterClose \u5C5E\u6027\u3002</p>
    37. 

  37. </li>
    38. 

  38. <li>
    39. 

  39. <p>\u5408\u5E76\u4E86 FormModel\u3001Form\uFF0C\u8BE6\u89C1\u4E0B\u65B9\u7684 Form \u91CD\u6784\u90E8\u5206\u3002</p>
    40. 

  40. </li>
    41. 

  41. <li>
    42. 

  42. <p><code>tabIndex</code>\u3001<code>maxLength</code>\u3001<code>readOnly</code>\u3001<code>autoComplete</code>\u3001<code>autoFocus</code> \u66F4\u6539\u4E3A\u5168\u5C0F\u5199\u3002</p>
    43. 

  43. </li>
    44. 

  44. <li>
    45. 

  45. <p>\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 <code>itemRender</code>\u3001<code>renderItem</code>\u3001<code>customRender</code>\u3001<code>dropdownRender</code>\u3001<code>dateCellRender</code>\u3001<code>dateFullCellRender</code>\u3001<code>monthCellRender</code>\u3001<code>monthFullCellRender</code>\u3001<code>renderTabBar</code>\u3002</p>
    46. 

  46. </li>
    47. 

  47. <li>
    48. 

  48. <p>\u6240\u6709\u914D\u7F6E scopedSlots \u7684\u5730\u65B9\u7EDF\u4E00\u6539\u6210 slots\u3002</p>
    49. 

  49. </li>
    50. 

  50. <li>
    51. 

  51. <p><code>{ on, props, attrs, ... }</code> \u914D\u7F6E\u8FDB\u884C\u6241\u5E73\u5316\u5904\u7406\uFF0C\u5982 <code>{ props: {type: 'xxx'}, on: {click: this.handleClick}}</code> \u6539\u6210 <code>{ type: 'xxx', onClick: this.handleClick }</code>, \u6D89\u53CA\u76F8\u5173\u5B57\u6BB5\uFF1A<code>okButtonProps</code>\u3001<code>cancelButtonProps</code>\u3002</p>
    52. 

  52. </li>
    53. 

  53. <li>
    54. 

  54. <p>xxx.sync \u6539\u6210 v-model:xxx</p>
    55. 

  55. </li>
    56. 

  56. <li>
    57. 

  57. <p>v-model \u66F4\u6539\u6210 v-model:xxx\uFF0C\u5177\u4F53\u6D89\u53CA\u7EC4\u4EF6\uFF1A</p>
    58. 

  58. <ul>
    59. 

  59. <li>v-model \u6539\u6210 v-model:checked \u7684\u7EC4\u4EF6\u6709: CheckableTag\u3001Checkbox\u3001Switch</li>
    60. 

  60. <li>v-model \u6539\u6210 v-model:value \u7684\u7EC4\u4EF6\u6709: Radio\u3001Mentions\u3001CheckboxGroup\u3001Rate\u3001DatePicker\u3001Select</li>
    61. 

  61. <li>v-model \u6539\u6210 v-model:visible \u7684\u7EC4\u4EF6\u6709: Tag\u3001Popconfirm\u3001Popove\u3001Tooltip\u3001Moda\u3001Dropdown</li>
    62. 

  62. <li>v-model \u6539\u6210 v-model:activeKey \u7684\u7EC4\u4EF6\u6709: Collaps\u3001Tabs</li>
    63. 

  63. <li>v-model \u6539\u6210 v-model:current \u7684\u7EC4\u4EF6\u6709: Steps</li>
    64. 

  64. <li>v-model \u6539\u6210 v-model:selectedKeys \u7684\u7EC4\u4EF6\u6709: Menu</li>
    65. 

  65. </ul>
    66. 

  66. </li>
    67. 

  67. </ul>
    68. 

  68. <h4 id="\u56FE\u6807\u5347\u7EA7">\u56FE\u6807\u5347\u7EA7 <a class="header-anchor" href="#\u56FE\u6807\u5347\u7EA7">
    69. 

  69.           <span aria-hidden="true" class="anchor">#</span>
    70. 

  70.         </a></h4>
    71. 

  71. <p>\u5728 <code>ant-design-vue@1.2.0</code> \u4E2D\uFF0C\u6211\u4EEC\u5F15\u5165\u4E86 svg \u56FE\u6807\uFF08<a href="https://github.com/ant-design/ant-design/issues/10353" target="_blank" rel="noopener noreferrer">\u4E3A\u4F55\u4F7F\u7528 svg \u56FE\u6807\uFF1F</a>\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</p>
    72. 

  72. <p>\u65E7\u7248 Icon \u4F7F\u7528\u65B9\u5F0F\u5C06\u88AB\u5E9F\u5F03\uFF1A</p>
    73. 

  73. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smile<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    74. 

  74. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smile<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    75. 

  75. </code></pre>
    76. 

  76. <p>2.0 \u4E2D\u4F1A\u91C7\u7528\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\uFF1A</p>
    77. 

  77. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    78. 

  78.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>smile-outlined</span> <span class="token punctuation">/></span></span>
    79. 

  79.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span><span class="token punctuation">></span></span>
    80. 

  80.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>smile-outlined</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
    81. 

  81.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">></span></span>
    82. 

  82. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
    83. 

  83. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    84. 

  84.   <span class="token keyword">import</span> SmileOutlined <span class="token keyword">from</span> <span class="token string">'@ant-design/icons-vue/SmileOutlined'</span><span class="token punctuation">;</span>
    85. 

  85.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    86. 

  86.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    87. 

  87.       SmileOutlined<span class="token punctuation">,</span>
    88. 

  88.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    89. 

  89.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    90. 

  90. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    91. 

  91. </code></pre>
    92. 

  92. <h4 id="\u7EC4\u4EF6\u91CD\u6784">\u7EC4\u4EF6\u91CD\u6784 <a class="header-anchor" href="#\u7EC4\u4EF6\u91CD\u6784">
    93. 

  93.           <span aria-hidden="true" class="anchor">#</span>
    94. 

  94.         </a></h4>
    95. 

  95. <p>\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</p>
    96. 

  96. <p>\u6D89\u53CA\u6539\u52A8\uFF1A</p>
    97. 

  97. <ul>
    98. 

  98. <li>Form \u65B0\u589E <code>scrollToFirstError</code>,<code>name</code>,<code>validateTrigger</code> \u5C5E\u6027\uFF0C\u65B0\u589E <code>finish</code>\u3001<code>finishFailed</code> \u4E8B\u4EF6\uFF0C\u65B0\u589E <code>scrollToField</code> \u65B9\u6CD5\u3002</li>
    99. 

  99. <li>Form.Item \u65B0\u589E <code>validateFirst</code>, <code>validateTrigger</code>, \u5E9F\u5F03 <code>prop</code> \u5C5E\u6027\uFF0C\u4F7F\u7528 <code>name</code> \u66FF\u6362\u3002</li>
    100. 

  100. <li>\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 <a href="http://user.name" target="_blank" rel="noopener noreferrer">user.name</a> \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</li>
    101. 

  101. <li>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</li>
    102. 

  102. </ul>
    103. 

  103. <pre class="language-js" v-pre><code><span class="token comment">// v1</span>
    104. 

  104. <span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    105. 

  105.   <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    106. 

  106.     <span class="token comment">// Do something with value</span>
    107. 

  107.   <span class="token punctuation">}</span>
    108. 

  108. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    109. 

  109. </code></pre>
    110. 

  110. <p>\u6539\u6210</p>
    111. 

  111. <pre class="language-js" v-pre><code><span class="token comment">// v2</span>
    112. 

  112. <span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    113. 

  113.   <span class="token comment">// Do something with value</span>
    114. 

  114. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    115. 

  115. </code></pre>
    116. 

  116. <h2 id="\u9047\u5230\u95EE\u9898">\u9047\u5230\u95EE\u9898 <a class="header-anchor" href="#\u9047\u5230\u95EE\u9898">
    117. 

  117.           <span aria-hidden="true" class="anchor">#</span>
    118. 

  118.         </a></h2>
    119. 

  119. <p>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 <a href="https://vuecomponent.github.io/issue-helper/" target="_blank" rel="noopener noreferrer">GitHub issues</a> \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002</p>
    120. 

  120. `,lastUpdated:1748060269537}},p={class:"markdown"};function l(c,n,i,r,d,u){return t(),s("article",p,n[0]||(n[0]=[e(`<p>\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue <code>1.x</code> \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue <code>2.x</code> \u7248\u672C\u3002</p><h2 id="\u5347\u7EA7\u51C6\u5907">\u5347\u7EA7\u51C6\u5907 <a class="header-anchor" href="#\u5347\u7EA7\u51C6\u5907"><span aria-hidden="true" class="anchor">#</span></a></h2><ol><li>\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</li><li>\u5347\u7EA7\u9879\u76EE Vue 3.0 \u4EE5\u4E0A\u3002</li></ol><h2 id="_2-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316">2.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316 <a class="header-anchor" href="#_2-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574">\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574 <a class="header-anchor" href="#\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574"><span aria-hidden="true" class="anchor">#</span></a></h3><ul><li>\u884C\u9AD8\u4ECE <code>1.5</code>(<code>21px</code>) \u8C03\u6574\u4E3A <code>1.5715</code>(<code>22px</code>)\u3002</li><li>\u57FA\u7840\u5706\u89D2\u8C03\u6574\uFF0C\u7531<code>4px</code> \u6539\u4E3A <code>2px</code>\u3002</li><li>\u5206\u5272\u7EBF\u989C\u8272\u660E\u5EA6\u964D\u4F4E\uFF0C\u7531 <code>#E8E8E8</code> \u6539\u4E3A <code>#F0F0F0</code>\u3002</li><li>Table \u9ED8\u8BA4\u80CC\u666F\u989C\u8272\u4ECE\u900F\u660E\u4FEE\u6539\u4E3A\u767D\u8272\u3002</li></ul><h3 id="\u517C\u5BB9\u6027\u8C03\u6574">\u517C\u5BB9\u6027\u8C03\u6574 <a class="header-anchor" href="#\u517C\u5BB9\u6027\u8C03\u6574"><span aria-hidden="true" class="anchor">#</span></a></h3><ul><li>\u6D4F\u89C8\u5668\u4E0D\u518D\u517C\u5BB9 IE 11 \u53CA\u4EE5\u4E0B\u7248\u672C\u3002</li><li>Vue \u6700\u4F4E\u652F\u6301\u7248\u672C\u4E3A Vue 3.0\u3002</li></ul><h4 id="\u8C03\u6574\u7684-API">\u8C03\u6574\u7684 API <a class="header-anchor" href="#\u8C03\u6574\u7684-API"><span aria-hidden="true" class="anchor">#</span></a></h4><ul><li><p>\u79FB\u9664\u4E86 LocaleProvider\uFF0C\u8BF7\u4F7F\u7528 <code>ConfigProvider</code> \u66FF\u4EE3\u3002</p></li><li><p>\u79FB\u9664\u4E86 Tag \u7684 afterClose \u5C5E\u6027\u3002</p></li><li><p>\u5408\u5E76\u4E86 FormModel\u3001Form\uFF0C\u8BE6\u89C1\u4E0B\u65B9\u7684 Form \u91CD\u6784\u90E8\u5206\u3002</p></li><li><p><code>tabIndex</code>\u3001<code>maxLength</code>\u3001<code>readOnly</code>\u3001<code>autoComplete</code>\u3001<code>autoFocus</code> \u66F4\u6539\u4E3A\u5168\u5C0F\u5199\u3002</p></li><li><p>\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 <code>itemRender</code>\u3001<code>renderItem</code>\u3001<code>customRender</code>\u3001<code>dropdownRender</code>\u3001<code>dateCellRender</code>\u3001<code>dateFullCellRender</code>\u3001<code>monthCellRender</code>\u3001<code>monthFullCellRender</code>\u3001<code>renderTabBar</code>\u3002</p></li><li><p>\u6240\u6709\u914D\u7F6E scopedSlots \u7684\u5730\u65B9\u7EDF\u4E00\u6539\u6210 slots\u3002</p></li><li><p><code>{ on, props, attrs, ... }</code> \u914D\u7F6E\u8FDB\u884C\u6241\u5E73\u5316\u5904\u7406\uFF0C\u5982 <code>{ props: {type: &#39;xxx&#39;}, on: {click: this.handleClick}}</code> \u6539\u6210 <code>{ type: &#39;xxx&#39;, onClick: this.handleClick }</code>, \u6D89\u53CA\u76F8\u5173\u5B57\u6BB5\uFF1A<code>okButtonProps</code>\u3001<code>cancelButtonProps</code>\u3002</p></li><li><p>xxx.sync \u6539\u6210 v-model:xxx</p></li><li><p>v-model \u66F4\u6539\u6210 v-model:xxx\uFF0C\u5177\u4F53\u6D89\u53CA\u7EC4\u4EF6\uFF1A</p><ul><li>v-model \u6539\u6210 v-model:checked \u7684\u7EC4\u4EF6\u6709: CheckableTag\u3001Checkbox\u3001Switch</li><li>v-model \u6539\u6210 v-model:value \u7684\u7EC4\u4EF6\u6709: Radio\u3001Mentions\u3001CheckboxGroup\u3001Rate\u3001DatePicker\u3001Select</li><li>v-model \u6539\u6210 v-model:visible \u7684\u7EC4\u4EF6\u6709: Tag\u3001Popconfirm\u3001Popove\u3001Tooltip\u3001Moda\u3001Dropdown</li><li>v-model \u6539\u6210 v-model:activeKey \u7684\u7EC4\u4EF6\u6709: Collaps\u3001Tabs</li><li>v-model \u6539\u6210 v-model:current \u7684\u7EC4\u4EF6\u6709: Steps</li><li>v-model \u6539\u6210 v-model:selectedKeys \u7684\u7EC4\u4EF6\u6709: Menu</li></ul></li></ul><h4 id="\u56FE\u6807\u5347\u7EA7">\u56FE\u6807\u5347\u7EA7 <a class="header-anchor" href="#\u56FE\u6807\u5347\u7EA7"><span aria-hidden="true" class="anchor">#</span></a></h4><p>\u5728 <code>ant-design-vue@1.2.0</code> \u4E2D\uFF0C\u6211\u4EEC\u5F15\u5165\u4E86 svg \u56FE\u6807\uFF08<a href="https://github.com/ant-design/ant-design/issues/10353" target="_blank" rel="noopener noreferrer">\u4E3A\u4F55\u4F7F\u7528 svg \u56FE\u6807\uFF1F</a>\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</p><p>\u65E7\u7248 Icon \u4F7F\u7528\u65B9\u5F0F\u5C06\u88AB\u5E9F\u5F03\uFF1A</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>smile<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    121. 

  121. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>smile<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    122. 

  122. </code></pre><p>2.0 \u4E2D\u4F1A\u91C7\u7528\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\uFF1A</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    123. 

  123.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>smile-outlined</span> <span class="token punctuation">/&gt;</span></span>
    124. 

  124.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span><span class="token punctuation">&gt;</span></span>
    125. 

  125.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>smile-outlined</span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    126. 

  126.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span>
    127. 

  127. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    128. 

  128. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    129. 

  129.   <span class="token keyword">import</span> SmileOutlined <span class="token keyword">from</span> <span class="token string">&#39;@ant-design/icons-vue/SmileOutlined&#39;</span><span class="token punctuation">;</span>
    130. 

  130.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    131. 

  131.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    132. 

  132.       SmileOutlined<span class="token punctuation">,</span>
    133. 

  133.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    134. 

  134.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    135. 

  135. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    136. 

  136. </code></pre><h4 id="\u7EC4\u4EF6\u91CD\u6784">\u7EC4\u4EF6\u91CD\u6784 <a class="header-anchor" href="#\u7EC4\u4EF6\u91CD\u6784"><span aria-hidden="true" class="anchor">#</span></a></h4><p>\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</p><p>\u6D89\u53CA\u6539\u52A8\uFF1A</p><ul><li>Form \u65B0\u589E <code>scrollToFirstError</code>,<code>name</code>,<code>validateTrigger</code> \u5C5E\u6027\uFF0C\u65B0\u589E <code>finish</code>\u3001<code>finishFailed</code> \u4E8B\u4EF6\uFF0C\u65B0\u589E <code>scrollToField</code> \u65B9\u6CD5\u3002</li><li>Form.Item \u65B0\u589E <code>validateFirst</code>, <code>validateTrigger</code>, \u5E9F\u5F03 <code>prop</code> \u5C5E\u6027\uFF0C\u4F7F\u7528 <code>name</code> \u66FF\u6362\u3002</li><li>\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 <a href="http://user.name" target="_blank" rel="noopener noreferrer">user.name</a> \u6765\u4EE3\u8868 { user: { name: &#39;&#39; } }\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 [&#39;user&#39;, &#39;name&#39;]\uFF09\u3002</li><li>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</li></ul><pre class="language-js"><code><span class="token comment">// v1</span>
    137. 

  137. <span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    138. 

  138.   <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    139. 

  139.     <span class="token comment">// Do something with value</span>
    140. 

  140.   <span class="token punctuation">}</span>
    141. 

  141. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    142. 

  142. </code></pre><p>\u6539\u6210</p><pre class="language-js"><code><span class="token comment">// v2</span>
    143. 

  143. <span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    144. 

  144.   <span class="token comment">// Do something with value</span>
    145. 

  145. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    146. 

  146. </code></pre><h2 id="\u9047\u5230\u95EE\u9898">\u9047\u5230\u95EE\u9898 <a class="header-anchor" href="#\u9047\u5230\u95EE\u9898"><span aria-hidden="true" class="anchor">#</span></a></h2><p>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 <a href="https://vuecomponent.github.io/issue-helper/" target="_blank" rel="noopener noreferrer">GitHub issues</a> \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002</p>`,25)]))}const m=a(o,[["render",l]]);export{m as default};
    147.