element-plus中el-dialog使用::v-deep()穿透设置样式不生效踩坑记录

场景:

html 复制代码
    <el-dialog
      v-model="dialogVisible"
      width="50%"
      :before-close="beforeClose"
      append-to-body
      draggable
      center
      title="标题"
    >
    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handlePublish">确 定</el-button>
          <el-button @click="beforeClose">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <style scope>
    ::v-deep(.el-dialog__header) {
	    border-bottom: none;
 	 }
 	::v-deep(.el-dialog__body) {
   	 padding: 20px 20px 0;
 	 }
  	::v-deep(.el-dialog__footer) {
  	  padding: 10px 20px 20px;
   	 border-top: none;
 	 }
    </style>

如上:我想去掉插槽自带的下边框和上边框,但是不生效。

解决方案

给el-dialog加个类,在不带scope的<style></style>中设置样式,如下:

html 复制代码
    <el-dialog
      class="tip-dialog"
    >
    </el-dialog>

样式:

css 复制代码
<style lang="scss">
.tip-dialog {
  .el-dialog__header {
    border-bottom: none;
  }
  .el-dialog__body {
    padding: 20px 20px 0;
  }
  .el-dialog__footer {
    padding: 10px 20px 20px;
    border-top: none;
  }
}
</style>

这样就好了。

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体