从 v2 到 v3
目前 v3 的 API 还不完全稳定,即使是小版本也会出现非兼容变化
v3 的 API 调整,期望能够做到组件之间命名一致性更高,属性名称符合直觉
以下列出的是一些非兼容的更新
Button
- type
recommend改名为outline - type
text-primary改名为text - 实现灰色的的文字按钮(原来的
type="text")需要配合color属性实现,如在默认主题中:color="default" type="text" - 实现灰色线框按钮(原来的
type="info")需要配合color属性实现,如在默认主题中:color="default" type="outline"
Input
- 更改了模板结构,如果你原来对
Input进行了 CSS 覆写,可能会存在问题 Input在 v2 的实现,是一个高度为44px底部带有分割线的组件,在 v3 中对FormItem增加了padding,默认FormItem底部会有分割线。目前,Input在单独使用时,仍然是高度为44px,底部带有分割线,当将Input放到FormItem下的时候,会变为高度为22px,底部不带分割线的组件。具体Input的实现需要进一步与设计对齐
Checkbox
- 去掉了原来
checkbox自带的padding: 4px 0; value仅在配合CheckboxGroup时使用
CheckboxGroup
value属性只能是string[]
Radio
label属性改为仅用于展示用途,原来会作为是否选中的值判断- 新增
value代替原来label关于值判断的场景(配合RadioGroup使用) - 新增
checked属性用于单独使用Radio的场景 - 新增
update:checked事件用于单独使用Radio的场景 input事件、update:value事件的格式改成{ checked: boolean; value: any; }- 去掉自带的
padding: 4px 0; - 去掉了
cancel属性,Radio选中后再次点击不能被取消,否则与Radio名称相悖 - 因为实际在 v2 中没有人使用
options属性,去掉options属性
RadioGroup
- 因为实际在 v2 中没有人使用
options属性,去掉options属性
FormItem
- 去掉了
next-slot-line属性 - 新增
layout属性,代替原来的next-slot-line - FormItem 的表单域增加了上下
11px的padding - FormItem 默认增加底部的分割线,可使用
show-border展示隐藏 - 对
FormItem的模板结构进行了更改,如果你原来对FormItem进行了 CSS 覆写,可能会存在问题
Form
- 新增
layout属性
Calendar
minDate属性命名更改为minmaxDate属性命名更改为max- 时间参数,事件中的时间均改为
dayjs对象 - Calendar 弹出层打开时,现在会自动定位到当前时间的月份
Snackbar
Snackbar 的 API 可能会有进一步的较大调整
- 去掉
content,使用default slot传递 - 去掉
revert-color属性 - 关闭按钮移至右侧,左侧支持展示
icon/image
Popup
- 在可能的情况话,会渲染到
body,小程序使用root-portal,具体查看... (popup.md)