🥵 el-dialog添加append-to-body属性后样式失效 🥵

497 阅读1分钟

先上代码 -- 很简单一个弹窗 + 表单的结构

结构.png

期望打开是这样

弹框.png

实际打开是这样 😅 每个输入框都有自己的想法 😅

样式错乱.png

开始检查样式是否没生效,权重,穿透,都没问题

不惜加上 !important 宽度仍然失效

自定义样式.png

再回到最开始的地方,发现el-dialog有个属性append-to-body

查阅文档后发现这个属性的作用就是让载体插入到body元素,所以直接给嵌套的元素加样式是无效的 😅 ,去掉这属性即可。页面是从其他组件复用过来的,原页面是2个弹框嵌套,所以才加上了这个属性,没想太多,结果排查了挺久 😅,CV大法固然好使,但是掉坑里了还是得自己爬起来!