本文主要是介绍VUE3 无法修改 el-dialog 样式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
用下面这种方式修改 el-dialog 组件样式一点作用都没有,正常用这种方式修改 el 的el-button、tab等都是百试不爽的。最后找到解决办法和原因。在el-dialog外面套一层div
/deep/ .el-dialog {
background: url(https://lanhu-oss.lanhuapp.com/7cbd761cd26f7b255086dd61bc2edc56) 100% 100% no-repeat!important;
padding: 0;
}
原因:使用scoped
的时候,在 html 的标签中会生成data-v-xxx
的一个属性,样式穿透就是利用的这个属性生成的css;
而在 vue3 中,我们可以在template
下不使用一个标签来包裹全部内容,而此时el-dialog
在第一层的情况下就没有对应的data-v-xxx
父级元素标签,所以样式穿透也就无效了.
我觉得说白了就是 template下第一层 这样施加样式的方式是无效的
这篇关于VUE3 无法修改 el-dialog 样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!