2.0.0-beta.10

2020-09-24

• 🌟 Update Vue dependency to release version
• 🐞 Fix the problem that Menu does not collapse in Layout #2819
• 🐞 Fix a warning issue when switching Tabs #2865
• 🐞 Fix the problem that the input box does not trigger the change event when compositionend
• 🐞 Fix the problem that the Upload button does not disappear #2884
• 🐞 Fix upload custom method not working issue #2837
• 🐞 Fix some ts type errors

---

• 🌟 更新 Vue 依赖到 release 版本
• 🐞 修复 Menu 在 Layout 中不折叠问题 #2819
• 🐞 修复 Tabs 切换时出现 warning 问题 #2865
• 🐞 修复输入框在 compositionend 时不触发 change 事件问题
• 🐞 修复 Upload 上传按钮不消失问题 #2884
• 🐞 修复 Upload 自定义 method 不生效问题 #2837
• 🐞 修复若干 ts 类型错误

2.0.0-beta.7

• 🐞 Fix the problem that Descriptions Item does not support v-for #2793
• 🐞 Fix Modal button loading effect not working problem 9257c1
• 🐞 Fix the problem that the Steps component cannot be clicked when using v-model ec7309
• 🌟 Checkbox, Radio add event declaration
• 🐞 Fix ts type error 802446

---

• 🐞 修复 Descriptions Item 不支持 v-for 问题 #2793
• 🐞 修复 Modal button loading 效果不生效问题 9257c1
• 🐞 修复 Steps 组件使用 v-model 时不可点击的问题 ec7309
• 🌟 Checkbox、Radio 添加事件声明
• 🐞 修复 ts 类型错误 802446

2.0.0-beta.5

2020-8-31

• 🔥 Support Vite

---

• 🔥 支持 Vite

2.0.0-beta.4

• 🌟 Remove polyfills that are no longer used
• 🐞 Fix the problem of calling Modal afterClose twice
• 🐞 Supplement the declaration that ts type files lack native attributes

---

• 🌟 移除不再使用的 polyfill
• 🐞 修复 Modal afterClose 调用两次的问题
• 🐞 补充 ts 类型文件缺少原生属性的声明

2.0.0-beta.3

• 🔥 Support Typescript.
• 🔥 Added Space component.
• 🐞 Fix the problem that some components cannot use css scope 4bdb24.
• 🐞 Fix List.Meta registration failure problem 03a42a
• 🐞 Fix the problem of misalignment in the fixed column of Table #1493
• 🐞 Fix the problem that the Button is not vertically centered bd71e3
• 🐞 Fix Tabs multiple departure change event issue 8ed937

---

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

1.6.5

2020-08-25

• 🔥🔥🔥 Vue 3 compatible 2.0.0-beta.3
• 🔥 Add Space component #2669
• 🌟 Optimize zh_TW language pack #2679
• 🐞 Fix breadcrumb Breadcrumb repeated key problem #2505
• 🐞 Fix the problem of misalignment in the fixed column of Table #1493
• 🐞 Fix the problem that the Enter key will report an error when the Mentions component is empty #2662

---

2020-08-25

• 🔥🔥🔥 兼容 Vue 3 的 2.0.0-beta.3 版本发布
• 🔥 新增 Space 组件 #2669
• 🌟 优化 zh_TW 语言包 #2679
• 🐞 修复面包屑 Breadcrumb 重复 key 问题 #2505
• 🐞 修复 Table 固定列情况下错位问题 #1493
• 🐞 修复 Mentions 组件为空时回车键报错的问题 #2662

2.0.0-beta.2

Design specification adjustment

• Adjust the row height from 1.5(21px) to 1.5715(22px).
• Basic round corner adjustment, changed from 4px to 2px.
• The color brightness of the dividing line is reduced, from #E8E8E8 to #F0F0F0.
• The default background color of Table is changed from transparent to white.

Compatibility adjustment

• The minimum supported version of IE is IE 11.
• The minimum supported version of Vue is Vue 3.0.

Adjusted API

• Removed LocaleProvider, please use ConfigProvider instead.

• Removed the afterClose property of Tag.

• Merged FormModel and Form, see the Form refactoring part below for details.

• tabIndex, maxLength, readOnly, autoComplete, autoFocus are changed to all lowercase.

• In order to use the slot more friendly in template syntax, all related to xxxRender, renderXxxx are changed to single parameter, involving itemRender, renderItem, customRender, dropdownRender, dateCellRender, dateFullCellRender, monthCellRender, monthFullCellRender, renderTabBar.

• All the places where scopedSlots are configured are changed to slots.

• { on, props, attrs, ... } configuration is flattened, such as { props: {type:'xxx'}, on: {click: this.handleClick}} changed to { type: 'xxx', onClick: this.handleClick }, related fields: okButtonProps, cancelButtonProps.

• Change xxx.sync to v-model:xxx

• v-model is changed to v-model:xxx, which specifically involves components:

  • The components changed from v-model to v-model:checked are: CheckableTag, Checkbox, Switch
  • The components changed from v-model to v-model:value are: Radio, Mentions, CheckboxGroup, Rate, DatePicker
  • The components changed from v-model to v-model:visible are: Tag, Popconfirm, Popove, Tooltip, Moda, Dropdown
  • The components changed from v-model to v-model:activeKey are: Collaps, Tabs
  • The components changed from v-model to v-model:current are: Steps
  • The components changed from v-model to v-model:selectedKeys are: Menu

Icon Upgrade

In [email protected], we introduced the svg icon (Why use the svg icon?). The icon API that uses string naming cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 2.0, we adjusted the icon usage API to support tree shaking, reducing the default package size by approximately 150 KB (Gzipped).

The old way of using Icon will be obsolete:

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

In 2.0, an on-demand introduction method will be adopted:

<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>

Component refactoring

In 1.x, we provide two form components, Form and FormModel. The original Form component uses v-decorator for data binding. In Vue2, we use context to force update components. However, in Vue3, due to the introduction of patchFlag, etc. Optimization method, forced refresh will destroy the performance advantage brought by patchFlag. So in version 2.0, we merged Form and FormModel, retained the use of FormModel, enriched related functions, and renamed it to Form.

Involving changes:

• Added scrollToFirstError, name, validateTrigger properties for Form, added finish, finishFailed events, and added scrollToField method.
• Form.Item adds validateFirst, validateTrigger, and discards the prop attribute, and replaces it with name.
• The nested field path uses an array. In the past version, we used. To represent the nested path (such as user.name to represent {user: {name:''} }). However, in some back-end systems, the variable name will also carry .. This causes users to need additional codes for conversion. Therefore, in the new version, nested paths are represented by arrays to avoid wrong handling behaviors (such as ['user','name']).
• validateFields no longer supports callback. validateFields will return a Promise object, so you can perform corresponding error handling through async/await or then/catch. It is no longer necessary to determine whether errors is empty:

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

Change to

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

---

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

图标升级

在 [email protected] 中，我们引入了 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
});

1.6.4

2020-7-21

• 🐞 Fix breadcrumb Breadcrumb duplicate key problem #2505
• 🐞 Fix the Tooltip issue when MenuItem title is empty #2526
• 🐞 Fix the problem that Input textarea cannot be dragged up when allow-clear is activated. #2563
• 🌟 Add less variables @select-item-selected-color #2458
• 🌟 Add flex attribute to Col in Grid #2558

---

• 🐞 修复面包屑 Breadcrumb 重复 key 问题 #2505
• 🐞 修复 MenuItem title 为空时，依然有 Tooltip 问题 #2526
• 🐞 修复 Input textarea 激活 allow-clear 时无法向上拖动的问题。#2563
• 🌟 添加 less 变量 @select-item-selected-color #2458
• 🌟 Grid 中 Col 添加 flex 属性 #2558

1.6.3

1.6.3

2020-07-05

• 🐞 Fix Input.Password focus position shift issue #2420
• 🐞 Fix Drawer maskstyle not working #2407
• 🐞 Fix Drawer maskstyle not working #2407
• 🌟 Button supports custom Icon #2245
• 🌟 DatePicker supports custom format #2276
• 🐞 Fix DatePicker year and time is incorrect #2488
• 🌟 Optimize the Menu component, the animation is smoother
• 🐞 Fix Dropdown pop-up position error #2359
• 🐞 Fix the problem of duplicate key when Breadcrumb has the same name #2505

---

• 🐞 修复 Input.Password focus 位置移位问题 #2420
• 🐞 修复 Drawer maskstyle 不生效问题 #2407
• 🐞 修复 Drawer maskstyle 不生效问题 #2407
• 🌟 Button 支持自定义 Icon #2245
• 🌟 DatePicker 支持自定义 format #2276
• 🐞 修复 DatePicker 年份时间不正确问题 #2488
• 🌟 优化 Menu 组件，动画更加流畅
• 🐞 修复 Dropdown 弹窗位置错误问题 #2359
• 🐞 修复 Breadcrumb 名称相同时重复key问题 #2505

1.6.2

1.6.2

2020-06-02

• 🐞 Fix dialogClass type error #2298
• 🐞 Fix RangePicker panel display error #2318

---

• 🐞 修复弹窗 dialogClass 类型错误 #2298
• 🐞 修复 RangePicker 面板展示错误 #2318