vue3的element-plus的el-dialog的样式修改无效问题

问题描述

想要修改element-plus的对话框el-dialog中的样式,发现在页面style的scoped属性下,使用:deep深入选择器进行修改是无效的。(vue2下深度选择器是有效的)

//无效
:deep(.el-dialog){
  background-color: transparent;
}
解决
方法一

el-dialog外嵌套一层div

 <div class="my-dialog">
    <el-dialog v-model="dialogVisibles"  v-if="dialogVisibles">
    </el-dialog>
</div>

<style scoped lang=less>
:deep(.my-dialog){
  background-color: transparent;
}
// 使用深度是选择器也生效了
:deep(.el-dialog){
  background-color: transparent;
}
<style >
方法二

不在外面前套div, style 不使用 scoped

.el-dialog {
  background-color: transparent;
}
// 或则 el-dialog 加上class
.my-dialog {
  background-color: transparent;
}
原理

网友:

在组件中中 把el-dialog放在一个div中,然后:deep(你要修改的元素class) , 还有一个重要的前提是dialog中有一个属性append-to-body ,把这个属性设成false 或者不写才可以用深度选择器修改样式,这个属性就是把dialog插入到body中,不然就算包裹在div中依然是取不到样式

这个问题并不是elmentUi和element-plus引起的,而是vue2和vue3的区别。vue2中要求单个组件文件中的template中只能有一个元素(如:div),而vue3是可以有多个的,vue3中不生效,是因为直接把el-dialog写在了template根目录中,其实只要在template中添加一个div,所有东西都放到div中就可以了。本质原因是:页面中el-dialog的渲染位置不同,添加div就会在当前组件位置渲染,如果没有div,就会在中渲染。这个答案大家接受吗?

参考

你可能感兴趣的:(前端,vue.js,javascript,elementui)