vue3的element-plus的el-dialog的样式加上scoped发现:deep()不再生效解决方案
想要将 弹框 el-dialog__header .el-dialog__body的padding值设为0,但是。解决方案: 弹框加上 自定义类名custom-class。
·
- 想要将 弹框 el-dialog__header .el-dialog__body 的padding值设为0,但是
( el-dialog 用了 append-to-body 属性情况下)
官网解释 :Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
代码如下: (加上scoped,样式不生效)
<style lang="scss">
:deep( .el-dialog ){
.el-dialog__header{
padding: 0 ;
}
.el-dialog__header + .el-dialog__body{
padding: 0 ;
}
.el-dialog__body{
padding: 0 ;
}
}
</style>
解决方案: 弹框加上 自定义类名 custom-class
<template>
<el-dialog v-model="visible" append-to-body custom-class="dialog-class"> </el-dialog>
</template>
---------------------------------------------------
<style lang="scss">
.dialog-class{
border-radius: 12px;
.el-dialog__header{
padding: 0 ;
}
.el-dialog__header + .el-dialog__body{
padding: 0 ;
}
.el-dialog__body{
padding: 0 ;
}
}
</style>
-------------这里写弹框里其他内容的样式--------------------------------
<style lang="scss" scoped>
:deep( .calss){
}
</style>
- 将append-to-body 属性去掉 使用以下方法即可使:deep()生效
需要div包住 el-dialog
<template>
<div>
<el-dialog v-model="visible" append-to-body custom-class="dialog-class"> </el-dialog>
</div>
</template>
<style lang="scss" scoped>
:deep( .el-dialog){
.el-dialog__header{
padding: 0 ;
}
.el-dialog__header + .el-dialog__body{
padding: 0 ;
}
.el-dialog__body{
padding: 0 ;
}
.main{
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)