el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!

场景:

<el-dialogv-model="dialogVisible"width="800px":before-close="beforeClose"append-to-body:close-on-click-modal="false"title="增加文档"><template #footer><div style="text-align:center"><el-button type="primary" @click="saveFieldOption" :disabled="confirmUpload">确 定 </el-button><el-button @click="uploadDialogClose">取 消</el-button></div></template></el-dialog><style lang="scss" scoped>::v-deep(.el-dialog__header) {border-bottom: 1px solid #E7E7E7 !important;color:#3D3D3D !important;}::v-deep(.el-dialog__body) {padding: 24px 40px  12px !important;}</style>

如上:我想给header插槽增加下边框,并且想改变el-dialog__body盒子的内边距,但是不生效。 

解决方案

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

    <el-dialogclass="dialog-bar"></el-dialog>

样式:

<style lang="scss">
.dialog-bar{.el-dialog__body {padding: 24px 40px  12px !important;}.el-dialog__header {border-bottom: 1px solid #E7E7E7 !important;color:#3D3D3D !important;}
}
</style>

实现效果如下:

注意

  • <style></style>中如果不添加scope,则其中的样式会在所有页面生效,所以务必给该el-dialog添加一个全局都不会重复的类名或者Id属性
  • <style></style>可以与<style  scoped></style>同时存在于同一个组件,两者并不会冲突,除了el-dialog之外的其他样式还是应该写在<style  scoped></style>中,如下图:
<style lang="scss">
.dialog-bar{.el-dialog__body {padding: 24px 40px  12px !important;}.el-dialog__header {border-bottom: 1px solid #E7E7E7 !important;color:#3D3D3D !important;}
}
</style><style lang="scss" scoped>
//除了el-dialog之外的其他样式
</style>

好了,本文就到这里吧,点个关注再走嘛~ 

 🚀 个人简介:7年开发经验,现任职某国企前端负责人,分享前端相关技术与工作常见问题~
💟 作    者:前端菜鸟的自我修养❣️
📝 专    栏:前端常见问题汇总,避坑大全
🌈 若有帮助,还请 关注➕点赞➕收藏  ,不行的话我再努努力💪💪💪  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/359956.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电梯开关状态人员进出检测数据集VOC+YOLO格式2220张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2220 标注数量(xml文件个数)&#xff1a;2220 标注数量(txt文件个数)&#xff1a;2220 标注…

YOLOv10(6):YOLOv10基于TensorRT的部署(基于INetworkDefinition)

1. 写在前面 我们在前面已经讲过很多关于YOLOv10的一些知识点&#xff0c;也简单理了一下如何训练自己的数据。 现在本篇文章主要是讲解一下如何在TensorRT中部署YOLOv10&#xff0c;相信经过这一步&#xff0c;各位小伙伴已经能够无限的接近于将YOLOv10产品化了。 另一个需要说…

C++学习合集

#整理到一块&#xff0c;方便查东西&#xff0c;顺便补充一些之前没有学习到的东西# 变量 char--1字节 short--2字节 int-4字节 long--4字节 long long(int)--8字节&#xff1b;准确来说变量的大小取决于编译器&#xff0c;1字节8个二进制位&#xff0c;其中最高位为符号位…

【系统架构设计师】五、计算机网络(概念|通信技术|网络技术)

目录 一、计算机网络概念 二、通信技术 三、网络技术 3.1 局域网(LAN) 3.1.1 局域网拓扑结构 3.1.2 局域网协议 3.2 无线局域网(WLAN) 3.3 广域网(WAN) 3.4 城域网&#xff08;MAN) 3.5 移动通信网 四、组网技术 4.1 OSI七层模型 4.1.1 交换机 4.1.2 路由器 4.2…

Linux下环境变量配置与解读

文章目录 1.linux下查找java的安装目录&#xff08;没有配置环境变量&#xff09;2.配置文件加载解读3.配置java环境变量 1.linux下查找java的安装目录&#xff08;没有配置环境变量&#xff09; 执行如下命令&#xff0c;查看版本信息&#xff0c;确定java已经安装 java -vers…

DataWhale - 吃瓜教程学习笔记(三)

学习视频&#xff1a;第3章-对数几率回归_哔哩哔哩_bilibili 西瓜书对应章节&#xff1a; 3.3 对数几率回归 sigmoid函数 极大似然估计建模 信息论 以概率论、随机过程为基本研究工具&#xff0c;研究广义通信系统的整个过程 - 信息熵 &#xff08;信息期望&#xff09; 度…

Easyui Datagrid 解决页面加载重复请求2次后端问题

现象 在页面刚刚打开时&#xff0c;页面加载完毕&#xff0c;显示查询数据&#xff0c;连续请求网络2次&#xff0c; 第一次是只携带了 分页参数&#xff1b; 第二次携带分页和查询参数 问题出现原因 html代码中利用class声明了datagrid&#xff0c;导致easyUI解析class代…

STM32 DAC模块的应用(FW_F1_V1.8.5)

目录 概述 1 STM32Cube配置项目 1.1 软件版本信息 1.2 配置DAC模块参数 1.3 GENERATE Project 2 DAC库函数介绍 2.1 初始化函数&#xff1a;HAL_DAC_Init 2.2 启动DAC数据转换&#xff1a;HAL_DAC_Start 2.3 停止DAC数据转换&#xff1a;HAL_DAC_Stop 2.4 设置通道数…

【软件下载】Camtasia Studio 2024详细安装教程视频

习惯上来说Camtasia Studio是一款简单易用的高清录屏和视频编辑软件&#xff0c;拥有录制屏幕和配音、视频的剪辑和过场动画片、添加说明字幕和水印、制作视频封面和菜单、视频压缩和播放。不得不说Camtasia是一款屏幕录制和视频剪辑软件&#xff0c;教授课程&#xff0c;培训他…

剑指offer 算法题(搜索二维矩阵)

剑指offer 第二题 去力扣里测试算法 思路一&#xff1a; 直接暴力遍历二维数组。 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {for (unsigned int i{ 0 }; i < matrix.size(); i){for (unsigned int j{ 0 };…

【NLP练习】Transformer实战-单词预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 参考链接&#xff1a; LANGUAGE MODELING WITH NN.TRANSFORMER AND TORCHTEXT 任务&#xff1a;自定义输入一段英文文本进行预测 一、定义模型 from tempfi…

多维表格/业务库表格大数据量性能瓶颈

先说最终结论&#xff1a;Angular 组件创建性能损耗是当下主要的性能瓶颈 理由&#xff1a; 基于以往编辑器性能优化的经验&#xff0c;编辑器在动态渲染内容时会创建很多壳子组件&#xff08;也就是Angular 组件&#xff09;&#xff0c;排查的时候就发现如果略这些壳子组件性…

Day9 —— 大数据技术之ZooKeeper

ZooKeeper快速入门系列 ZooKeeper的概述什么是ZooKeeper&#xff1f;ZooKeeper的特点和功能使用ZooKeeper的原因 ZooKeeper数据模型ZooKeeper安装ZooKeeper配置ZooKeeper命令行操作常见服务端命令 ZooKeeper的概述 什么是ZooKeeper&#xff1f; ZooKeeper是一个开源的分布式协…

ZOOM太卡怎么办?公司如何解决ZOOM会议卡顿?

ZOOM作为一种常见的办公工具&#xff0c;尤其在跨国公司和外资企业中&#xff0c;在线会议非常普遍。然而&#xff0c;由于ZOOM的服务器部署在国外&#xff0c;国内用户使用时可能会遇到卡顿、不稳定和声音断续等问题。那么&#xff0c;如何有效解决ZOOM卡顿的问题呢&#xff1…

数据库管理-第212期 上期SQL性能优化勘误与扩展(20240624)

数据库管理212期 2024-06-24 数据库管理-第212期 上期SQL性能优化勘误与扩展&#xff08;20240624&#xff09;1 环境2 方案1问题3 问题引申总结 数据库管理-第212期 上期SQL性能优化勘误与扩展&#xff08;20240624&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#xff08;尹海…

OS中断机制-外部中断触发

中断函数都定义在中断向量表中,外部中断通过中断跳转指令触发中断向量表中的中断服务函数,中断指令可以理解为由某个中断寄存器的状态切换触发的汇编指令,这个汇编指令就是中断跳转指令外部中断通过在初始化的时候使能对应的中断服务函数如何判断外部中断被触发的条件根据Da…

【机器学习项目实战(二)】基于朴素贝叶斯的中文垃圾短信分类

完整代码、数据集和相应的报告 链接已经放在了正文最下方, 供大家参考学习 摘要 ​ 本文探讨了中文垃圾短信分类的问题,通过收集实际数据集,运用多种机器学习算法进行分类,并对比了不同算法在垃圾短信分类任务上的性能。本研究旨在提高中文垃圾短信的识别准确率,为构建更…

《UDS协议从入门到精通》系列——图解0x2A:通过周期读ID数据

《UDS协议从入门到精通》系列——图解0x2A&#xff1a;通过周期读ID数据 一、简介二、数据包格式2.1 服务请求格式2.2 服务响应格式2.2.1 肯定响应2.2.2 否定响应 三、通信示例 Tip&#x1f4cc;&#xff1a;本文描述中但凡涉及到其他UDS服务的&#xff0c;将陆续提供链接跳转方…

CAN总线在新能源行业中的重要应用

2019年10月26日第三届中国&#xff08;佛山&#xff09;氢能源大会中展示了氢燃料电池城市客车&#xff0c;与目前的纯电动汽车和传统汽车相比&#xff0c;作为一种新的驱动形式出现。但是&#xff0c;新能源汽车整车网络的实现依旧离不开CAN总线通讯。 工程师们通过CAN总线读取…

Linux Redhat ens33不显示IP问题

优质博文&#xff1a;IT-BLOG-CN 【第一步】&#xff1a;查看系统网卡设备 : ip addr show 【第二步】&#xff1a;修改网卡配置参数 cd /etc/sysconfig/network-scripts/ vi ifcfg-ens33 修改ONBOOT参数为yes 【第三步】&#xff1a;重启网卡&#xff0c;然后ping检测…