Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构-Linuxeden开源社区

2.0.0-beta.3 #

🔥 支持 Typescript。
🔥 新增 Space 组件。
🐞 修复部分组件无法使用 css scope 问题 4bdb24。
🐞 修复 List.Meta 注册失败的问题 03a42a
🐞 修复 Table 固定列情况下错位问题 #1493
🐞 修复 Button 没有垂直居中的问题 bd71e3
🐞 修复 Tabs 多次出发 change 事件问题 8ed937

2.0.0-beta.2 #

2020-08-14

设计规范调整 #

行高从 1.5(21px) 调整为 1.5715(22px)。
基础圆角调整，由4px 改为 2px。
分割线颜色明度降低，由 #E8E8E8 改为 #F0F0F0。
Table 默认背景颜色从透明修改为白色。

兼容性调整 #

IE 最低支持版本为 IE 11。
Vue 最低支持版本为 Vue 3.0。

调整的 API #

移除了 LocaleProvider，请使用 ConfigProvider 替代。
移除了 Tag 的 afterClose 属性。
合并了 FormModel、Form，详见下方的 Form 重构部分。
tabIndex、maxLength、readOnly、autoComplete、autoFocus 更改为全小写。
为了在 template 语法中更友好的使用插槽，所有涉及到 xxxRender, renderXxxx 的均改成单参数，涉及到 itemRender、renderItem、customRender、dropdownRender、dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender、renderTabBar。
所有配置 scopedSlots 的地方统一改成 slots。
{ on, props, attrs, ... } 配置进行扁平化处理，如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick }, 涉及相关字段：okButtonProps、cancelButtonProps。
xxx.sync 改成 v-model:xxx
v-model 更改成 v-model:xxx，具体涉及组件：
- v-model 改成 v-model:checked 的组件有: CheckableTag、Checkbox、Switch
- v-model 改成 v-model:value 的组件有: Radio、Mentions、CheckboxGroup、Rate、DatePicker
- v-model 改成 v-model:visible 的组件有: Tag、Popconfirm、Popove、Tooltip、Moda、Dropdown
- v-model 改成 v-model:activeKey 的组件有: Collaps、Tabs
- v-model 改成 v-model:current 的组件有: Steps
- v-model 改成 v-model:selectedKeys 的组件有: Menu

图标升级 #

在 ant-design-vue@1.2.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 2.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少默认包体积约 150 KB(Gzipped)。

旧版 Icon 使用方式将被废弃：

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

2.0 中会采用按需引入的方式：

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

组件重构 #

在 1.x 中我们提供了 Form、FormModel 两个表单组件，原有的 Form 组件使用 v-decorator 进行数据绑定，在 Vue2 中我们通过上下文进行强制更新组件，但是在 Vue3 中，由于引入 patchFlag 等优化方式，强制刷新会破坏 patchFlag 带来的性能优势。所以在 2.0 版本中我们将 Form、FormModel 进行合并，保留了 FormModel 的使用方式，丰富了相关功能，并改名成 Form。

涉及改动：

Form 新增 scrollToFirstError,name,validateTrigger 属性，新增 finish、finishFailed 事件，新增 scrollToField 方法。
Form.Item 新增 validateFirst, validateTrigger, 废弃 prop 属性，使用 name 替换。
嵌套字段路径使用数组，过去版本我们通过 . 代表嵌套路径（诸如 user.name 来代表 { user: { name: ” } }）。然而在一些后台系统中，变量名中也会带上 .。这造成用户需要额外的代码进行转化，因而新版中，嵌套路径通过数组来表示以避免错误的处理行为（如 [‘user’, ‘name’]）。
validateFields 不再支持 callback。validateFields 会返回 Promise 对象，因而你可以通过 async/await 或者 then/catch 来执行对应的错误处理。不再需要判断 errors 是否为空：

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

改成

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

转自 https://www.oschina.net/news/118171/antdv-2-0-beta3-released