当前位置: 首页 > news >正文

Vue3中使用:deep修改element-plus的样式无效怎么办?

前言:当我们用 vue3 :deep() 处理 elementui 中 el-dialog_body和el-dislog__header 的时候样式一直无法生效,遇到这种情况怎么办?

解决办法:

1.直接在 dialog 上面增加class 我试过,也不起作用,最后用这种方法解决的,dialog 外面直接包一层 div
2.将样式单独写一个style标签进行覆盖---此方式由于样式写在外面,可能会影响整个项目的全局样式,--慎重考虑

需求:需要将el-drawer__header的底部的外边距去掉
方式一:
修改前:
在这里插入图片描述修改后:
在这里插入图片描述
生效方式:1.在最外层加一层在el-dialog外面包一层


2.主要是vue3中deep会因为最外层没有根节点失效的问题,只需要加一个根节点,deep就有效了
需要注意的是 :deep(这里面只能包一个)

<template><div class="dialog"><el-drawer v-model="drawerDialog" direction="rtl" @close="handleClose" size="50%"><template #header><div class="header"><h4>订单详情----订单编号(23232434343)</h4></div></template><template #default><div class="content"><div class="item-info"><div class="wrap"><div class="top"><div class="left"><div class="line"></div><div class="title">购方信息</div></div><div class="right"><el-button type="primary" plain>编辑</el-button></div></div><div class="info-list"></div></div></div></div></template><template #footer><div style="flex: auto"><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></template></el-drawer></div>
</template><script setup>
import { watchEffect, ref } from 'vue';
const emit = defineEmits(["close"])
const props = defineProps({visible: {type: Boolean,default: false}
})
const drawerDialog = ref(false);//确定的回调函数
const confirm = () => {}//取消的回调函数
const handleClose = () => {drawerDialog.value = false;emit('close');
}watchEffect(() => {if (props.visible) {drawerDialog.value = props.visible;}
})</script><style scoped lang="scss">
.dialog {:deep(.el-drawer__header) {margin: 0;}
}.header {background-color: #fff;height: 40px;
}.content {background-color: #EDEFEE;.item-info {.wrap {.top {display: flex;justify-content: space-between;.left {display: flex;align-items: center;.line {height: 15px;width: 4px;background-color: #07f;}.title {font-size: 16px;font-weight: bold;}}.right {}}.info-list {}}}
}
</style>

方式二:

<template> <el-drawer v-model="drawerDialog" direction="rtl" @close="handleClose" size="50%"><template #header><div class="header"><h4>订单详情----订单编号(23232434343)</h4></div></template><template #default><div class="content"><div class="item-info"><div class="wrap"><div class="top"><div class="left"><div class="line"></div><div class="title">购方信息</div></div><div class="right"><el-button type="primary" plain>编辑</el-button></div></div><div class="info-list"></div></div></div></div></template><template #footer><div style="flex: auto"><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></template></el-drawer>
</template><script setup>
import { watchEffect, ref } from 'vue';
const emit = defineEmits(["close"])
const props = defineProps({visible: {type: Boolean,default: false}
})
const drawerDialog = ref(false);//确定的回调函数
const confirm = () => {}//取消的回调函数
const handleClose = () => {drawerDialog.value = false;emit('close');
}watchEffect(() => {if (props.visible) {drawerDialog.value = props.visible;}
})</script><style>
.el-drawer__header {margin: 0;
}
</style>
<style scoped lang="scss">.header {background-color: #fff;height: 40px;
}.content {background-color: #EDEFEE;.item-info {.wrap {.top {display: flex;justify-content: space-between;.left {display: flex;align-items: center;.line {height: 15px;width: 4px;background-color: #07f;}.title {font-size: 16px;font-weight: bold;}}.right {}}.info-list {}}}
}
</style>

修改前:
在这里插入图片描述修改后:
在这里插入图片描述

相关文章:

Vue3中使用:deep修改element-plus的样式无效怎么办?

前言&#xff1a;当我们用 vue3 :deep() 处理 elementui 中 el-dialog_body和el-dislog__header 的时候样式一直无法生效&#xff0c;遇到这种情况怎么办&#xff1f; 解决办法&#xff1a; 1.直接在 dialog 上面增加class 我试过&#xff0c;也不起作用&#xff0c;最后用这种…...

具身智能之Isaac Gym使用

0. 简介 Isaac Gym 是由 NVIDIA 提供的一个高性能仿真平台&#xff0c;专门用于大规模的机器人学习和强化学习&#xff08;RL&#xff09;任务。它结合了物理仿真、GPU加速、深度学习框架互操作性等特点&#xff0c;使得研究人员和开发者可以快速进行复杂的机器人仿真和训练。…...

【大数据学习 | Spark】spark-shell开发

spark的代码分为两种 本地代码在driver端直接解析执行没有后续 集群代码&#xff0c;会在driver端进行解析&#xff0c;然后让多个机器进行集群形式的执行计算 spark-shell --master spark://nn1:7077 --executor-cores 2 --executor-memory 2G sc.textFile("/home/ha…...

《Python制作动态爱心粒子特效》

一、实现思路 粒子效果&#xff1a; – 使用Pygame模拟粒子运动&#xff0c;粒子会以爱心的轨迹分布并运动。爱心公式&#xff1a; 爱心的数学公式&#xff1a; x16sin 3 (t),y13cos(t)−5cos(2t)−2cos(3t)−cos(4t) 参数 t t 的范围决定爱心形状。 动态效果&#xff1a; 粒子…...

Jmeter 如何导入证书并调用https请求

Jmeter 如何导入证书并调用https请求 通过SSL管理器添加证书文件 支持添加的文件为.p12&#xff0c;.pfx&#xff0c;.jks 如何将pem文件转换为pfx文件&#xff1f; 在公司内部通常会提供3个pem文件。 ca.pem&#xff1a;可以理解为是根证书&#xff0c;用于验证颁发的证…...

Python程序15个提速优化方法

目录 Python程序15个提速优化方法1. 引言2. 方法一&#xff1a;使用内建函数代码示例&#xff1a;解释&#xff1a; 3. 方法二&#xff1a;避免使用全局变量代码示例&#xff1a;解释&#xff1a; 4. 方法三&#xff1a;使用局部变量代码示例&#xff1a;解释&#xff1a; 5. 方…...

足球虚拟越位线技术FIFA OT(二)

足球虚拟越位线技术FIFA OT&#xff08;二&#xff09; 在FIFA认证测试过程中&#xff0c;留给VAR系统绘制越位线的时间只有90秒&#xff08;在比赛中时间可能更短&#xff09;&#xff0c;那么90秒内要做什么事呢&#xff0c;首先场地上球员做出踢球动作&#xff0c;然后VAR要…...

centos7.9单机版安装K8s

1.安装docker [rootlocalhost ~]# hostnamectl set-hostname master [rootlocalhost ~]# bash [rootmaster ~]# mv /etc/yum.repos.d/* /home [rootmaster ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo [rootmaster ~]# cu…...

图像编辑一些概念:Image Reconstruction与Image Re-generation

图像编辑本质上是在“图像重建”&#xff08;image reconstruction&#xff09;和“图像再生成”&#xff08;image re-generation&#xff09;之间寻找平衡。 1. Image Reconstruction&#xff08;图像重建&#xff09; 定义&#xff1a;图像重建通常是指从已有的图像中提取信…...

【STM32】在 STM32 USB 设备库添加新的设备类

说实话&#xff0c;我非常想吐槽 STM32 的 USB device library&#xff0c;总感觉很混乱。 USB Device library architecture 根据架构图&#xff1a; Adding a custom class 如果你想添加新的设备类&#xff0c;必须修改的文件有 usbd_desc.cusbd_conf.cusb_device.c 需要…...

【Redis】Redis实现的消息队列

一、用list实现【这是数据类型所以支持持久化】 消息基于redis存储不会因为受jvm内存上限的限制&#xff0c;支持消息的有序性&#xff0c;基于redis的持久化机制&#xff0c;只支持单一消费者订阅&#xff0c;无法避免消息丢失。 二、用PubSub【这不是数据类型&#xff0c;是…...

# Spring事务

Spring事务 什么是spring的事务&#xff1f; 在Spring框架中&#xff0c;事务管理是一种控制数据库操作执行边界的技术&#xff0c;确保一系列操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而维护数据的一致性和完整性。Spring的事务管理主要关注以下几点&#xf…...

Java学习笔记--数组常见算法:数组翻转,冒泡排序,二分查找

一&#xff0c;数组翻转 1.概述:数组对称索引位置上的元素互换&#xff0c;最大值数组序号是数组长度减一 创建跳板temp&#xff0c;进行min和max的互换&#xff0c;然后min自增&#xff0c;max自减&#xff0c;当min>max的时候停止互换&#xff0c;代表到中间值 用代码实…...

ARM 架构(Advanced RISC Machine)精简指令集计算机(Reduced Instruction Set Computer)

文章目录 1、ARM 架构ARM 架构的特点ARM 架构的应用ARM 架构的未来发展 2、RISCRISC 的基本概念RISC 的优势RISC 的应用RISC 与 CISC 的对比总结 1、ARM 架构 ARM 架构是一种低功耗、高性能的处理器架构&#xff0c;广泛应用于移动设备、嵌入式系统以及越来越多的服务器和桌面…...

7.STM32之通信接口《精讲》之USART通信---多字节数据收发(数据包的模式:HEX数据包和文本数据包)

根据上一节的HEX数据包的设计完成&#xff0c;本节将完成文本数据包的编写&#xff0c;&#xff08;HEX数据包其实本质就是原始数据&#xff0c;文本数据包我么要接收到还要对照ASCll进行解析封装&#xff09; 有不懂的可参考上一节的讲解&#xff01;&#xff01;&#xff…...

基于Vue+SpringBoot的求职招聘平台

平台概述 本平台是一个高效、便捷的人才与职位匹配系统&#xff0c;旨在为求职者与招聘者提供一站式服务。平台内设三大核心角色&#xff1a;求职者、招聘者以及超级管理员&#xff0c;每个角色拥有独特的功能模块&#xff0c;确保用户能够轻松完成从信息获取到最终录用的整个…...

WebRTC 和 WebSocket

WebRTC 和 WebSocket 是两种不同的技术&#xff0c;虽然它们都用于在浏览器之间进行通信&#xff0c;但它们的设计目标和使用场景有所不同。以下是它们之间的主要区别&#xff1a; 目的和使用场景 WebRTC: 主要用于实现实时音视频通信。 支持点对点&#xff08;P2P&#xff09…...

小车综合玩法--5.画地为牢

一、实验准备 前面我们利用四路巡线模块巡线&#xff0c;现在我们利用这个特性&#xff0c;用黑线将小车围起来&#xff0c;让小车一直在我们围的圈内运动。 1.小车接线已安装&#xff0c;且安装正确 2.调试四路巡线模块遇黑线时指示灯亮。不是黑线时指示灯灭。 二、实验原理…...

数据库课程设计全流程:方法与实例解析

--- ### 一、数据库课程设计概述 数据库课程设计是学习数据库理论知识的重要实践环节&#xff0c;旨在帮助学生掌握数据库设计和应用系统开发的完整流程&#xff0c;包括需求分析、数据库设计、功能实现以及性能优化。 #### **设计目标** 1. 掌握数据库设计的基本步骤和原则…...

用Ruby编写一个自动化测试脚本,验证网站登录功能的正确性。

测试准备&#xff1a;从江河湖海到代码世界的奇妙之旅 亲爱的朋友们&#xff0c;你们好&#xff01;今天我要带你们进入一个神奇的世界——测试的世界。在这里&#xff0c;我们将会看到各种各样的测试用例&#xff0c;它们就像江河湖海一样&#xff0c;汇聚在一起&#xff0c;…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...