以下是给项目升级element-plus版本时遇到的warning或样式错乱问题,不一定全面,但应该覆盖了大部分常用组件的变更。

一、button组件

升级前:

<el-button type="text">文字按钮</el-button>

升级后:

<el-button type="primary" link>文字按钮</el-button>

二、upload组件

升级前:上传input所在div 与 文件列表ul 为兄弟组件

升级后:上传input所在div 与 文件列表ul 为父子组件

由于DOM结果发生变化,若有自定义样式,需关注。

三、form组件

1、label的样式变化

升级前:

升级后:

表单label的布局及对齐方式发生变化,若使用slot自定义了label样式,需关注。

2、表单校验问题

若在 el-form-item 标签上使用了 required 等校验规则,prop 属性为必填,否则会校验失败。 

四、table组件

table组件有个原生方法,当表格可见性变化时,会对table重新布局。升级前方法名为 layout,升级后方法名为 doLayout

五、dialog组件

头部插槽由 title 改为 header

六、input组件

前后图标的定位发生变化,由绝对定位改为flex布局

升级前:

升级后:

七、image组件

当开启图片预览功能,即设置了 preview-src-list 属性时,若预览时元素层级出现错乱,需设置 preview-teleported 属性值为 true。升级前所用属性为 append-to-body。

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐