vue3的element-plus的el-dialog的样式加上scoped发现:deep()不再生效解决方案

烂笔头1

已于 2025-04-24 17:45:19 修改

阅读量6.6k

点赞数 13

文章标签： vue elementui

于 2023-06-06 17:33:39 首次发布

本文链接：https://blog.csdn.net/weixin_50216073/article/details/131072360

版权

文章讲述了在Vue项目中使用ElementUI的el-dialog组件时，如何在append-to-body属性开启的情况下设置弹窗头部和主体的padding为0。通过添加自定义类名custom-class和使用scoped样式，或者包裹el-dialog在一个div内来实现样式生效的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要将弹框 el-dialog__header .el-dialog__body 的padding值设为0,但是

官网解释 :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"  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>

情况三：一个页面有两个或者更多弹窗，使用:deep( .el-dialog){ } 写法会造成所有弹窗样式都变了，这个时候，不需要加custom-class，也不用:deep() ,直接加append-to-body ，在

<el-dialog :model-value="visible"  class="main-dialog" append-to-body @close="handleClose">
</el-dialog>	
<el-dialog v-model="showConfirm" title="提示" width="300px" class="two-dialog" append-to-body :close-on-click-modal="false">
</el-dialog>	

<style lang="scss">
.main-dialog {
	padding: 0!important;
	.el-dialog__header {
	    padding: 0!important;
		height: 0!important;
	}
	.el-dialog__header + .el-dialog__body{
  		  padding: 0!important;                 
	 }
	.el-dialog__body {
		padding: 0!important;
	}
	.el-el-dialog__footer {
		padding: 0!important;
	}
}
.privacy-dialog {
.......
}
<style lang="scss" scoped> 这里写别的样式