Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构

2020年08月26日

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 重构部分。

  • tabIndexmaxLengthreadOnlyautoCompleteautoFocus 更改为全小写。

  • 为了在 template 语法中更友好的使用插槽,所有涉及到 xxxRender, renderXxxx 的均改成单参数,涉及到 itemRenderrenderItemcustomRenderdropdownRenderdateCellRenderdateFullCellRendermonthCellRendermonthFullCellRenderrenderTabBar

  • 所有配置 scopedSlots 的地方统一改成 slots。

  • { on, props, attrs, ... } 配置进行扁平化处理,如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick }, 涉及相关字段:okButtonPropscancelButtonProps

  • 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 属性,新增 finishfinishFailed 事件,新增 scrollToField 方法。
  • Form.Item 新增 validateFirstvalidateTrigger, 废弃 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
});
展开阅读全文
10 收藏
分享
加载中
精彩评论
一直在用antd,之前是react版本,现在是vue版本,相比element的风格,个人偏向于喜欢antd的风格样式。当目前看element的生态也很丰富,就看自己的喜好选择了。🌝🌝
2020-08-26 14:13
3
举报
终于支持ts了,新项目首选。
2020-08-27 17:58
1
举报
v5
2020-08-27 09:08
1
举报
最新评论 (14)
终于支持ts了,新项目首选。
2020-08-27 17:58
1
回复
举报
v5
2020-08-27 09:08
1
回复
举报
一直在用antd,之前是react版本,现在是vue版本,相比element的风格,个人偏向于喜欢antd的风格样式。当目前看element的生态也很丰富,就看自己的喜好选择了。🌝🌝
2020-08-26 14:13
3
回复
举报
antd 很好用,没必要整 vue 版本。
2020-08-26 13:05
0
回复
举报
前两个月开新项目,就从element切换到了antdv,看上的就是它对vue3的支持很积极,果然没辜负我的期待,很强!
2020-08-26 10:36
0
回复
举报
element-ui我感觉堪忧啊,没人维护了。
2020-08-26 10:14
0
回复
举报
已经没了 🌝🌝
2020-08-26 10:17
0
回复
举报
sfk
2020-08-26 13:23
0
回复
举报
隔壁ElemeUI呢?
2020-08-26 10:13
0
回复
举报
sfk
2020-08-26 13:25
0
回复
举报
支持
2020-08-26 09:56
0
回复
举报
666
2020-08-26 09:52
0
回复
举报
厉害了~~!~~~
2020-08-26 09:37
0
回复
举报
更多评论
14 评论
10 收藏
分享
返回顶部
顶部