vue3项目element-plus由v2.1.x升级到v2.2.x可能遇到的坑

        以下是给项目升级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。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值