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>

这样就好了。

相关推荐
鑫宝Code8 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app