Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构
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
});
