从 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 的表单域增加了上下 11pxpadding
  • FormItem 默认增加底部的分割线,可使用 show-border 展示隐藏
  • FormItem 的模板结构进行了更改,如果你原来对 FormItem 进行了 CSS 覆写,可能会存在问题

Form

  • 新增 layout 属性

Calendar

  • minDate 属性命名更改为 min
  • maxDate 属性命名更改为 max
  • 时间参数,事件中的时间均改为 dayjs 对象
  • Calendar 弹出层打开时,现在会自动定位到当前时间的月份

Snackbar

Snackbar 的 API 可能会有进一步的较大调整

  • 去掉 content,使用 default slot 传递
  • 去掉 revert-color 属性
  • 关闭按钮移至右侧,左侧支持展示 icon / image
  • 在可能的情况话,会渲染到 body,小程序使用 root-portal,具体查看... (popup.md)
本页包含