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>

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

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

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

相关文章

【图像去噪】论文精读:Pre-Trained Image Processing Transformer(IPT)

请先看【专栏介绍文章】:【图像去噪(Image Denoising)】关于【图像去噪】专栏的相关说明,包含适配人群、专栏简介、专栏亮点、阅读方法、定价理由、品质承诺、关于更新、去噪概述、文章目录、资料汇总、问题汇总(更新中) 文章目录 前言Abstract1. Introduction2. Related…

HTTP CRLF注入攻击

HTTP CRLF注入攻击 大家好&#xff0c;今天我们来聊聊一个与网络安全相关的重要话题——CRLF注入&#xff08;CRLF Injection&#xff09;。了解这种安全漏洞有助于我们更好地保护我们的应用程序和用户数据。 什么是CRLF&#xff1f; CRLF代表Carriage Return (回车) 和 Line…

免费实用的图片加水印工具

高度自定义的图片加水印工具 因工作需要和朋友的需求&#xff0c;我基于canvas开发了这款图片加水印工具。 地址&#xff1a;https://potatotools.top/toolsEntrance/pic/ImageWatermark.vue.html 功能亮点 尺寸定制 &#xff0c;轻松调整水印宽高&#xff0c;精准适配每张图…

C函数从lua中读取数据接口常用接口

读取基本数据类型的接口 lua_tonumber和lua_tointeger 用途&#xff1a;用于从Lua栈中获取数字类型的数据。lua_tonumber用于获取浮点数&#xff0c;lua_tointeger用于获取整数。示例&#xff1a;假设在Lua中调用一个C函数并传入一个数字&#xff0c;在C函数中可以这样获取这个…

51c自动驾驶~合集30

我自己的原文哦~ https://blog.51cto.com/whaosoft/12086789 #跨越微小陷阱&#xff0c;行动更加稳健 目前四足机器人的全球市场上&#xff0c;市场份额最大的是哪个国家的企业&#xff1f;A.美国 B.中国 C.其他 波士顿动力四足机器人 云深处 绝影X30 四足机器人 &#x1f…

优化装配,提升品质:虚拟装配在汽车制造中的关键作用

汽车是各种零部件的有机结合体&#xff0c;因此汽车的装配工艺水平和装配质量直接影响着汽车的质量与性能。在汽车装配过程中&#xff0c;经常会发生零部件间干涉或装配顺序不合理等现象&#xff0c;且许多零部件制造阶段产生的质量隐患要等到实际装配阶段才能显现出来&#xf…

Java 设计模式 详解

在Java开发中&#xff0c;设计模式是一种常见的、成熟的解决方案&#xff0c;用于应对特定的设计问题和复杂性管理。以下是一些常用的设计模式&#xff0c;它们可以分为三类&#xff1a;创建型模式、结构型模式和行为型模式。 一、创建型模式 创建型模式主要负责对象的创建&a…

java基础知识全集(一篇看到爽)(持续更新中)

java规范&#xff08;企业级&#xff09; 见名知意, 命名合理 强调了命名的可读性和合理性。 驼峰命名法 大驼峰&#xff1a;首字母大写&#xff0c;之后每个单词的首字母也大写&#xff08;如&#xff1a;MyVariableName&#xff09;。小驼峰&#xff1a;首字母小写&#xff0…

css iframe标签使用

<iframe> 标签用于在网页中嵌入另一个 HTML 页面。它非常灵活&#xff0c;可用于嵌入内容&#xff0c;比如其他网站、视频、地图等。以下是有关 <iframe> 的详细介绍及使用方法&#xff1a; 基本语法 <iframe src"URL" width"宽度" height…

进入 RPG Prime:第六周游戏指南

进入 RPG Prime&#xff0c;在这里&#xff0c;每一个任务都是一个等待展开的史诗故事。选择你的等级&#xff0c;召集你的队伍&#xff0c;开始融合策略、魔法和神话的冒险&#xff01; 本系列共有 10 篇攻略&#xff0c;贯穿 Alpha 第 4 季&#xff0c;每周都有新攻略&#…

leetcode 数组专题 06-扫描线算法(Sweep Line Algorithm)

扫描线专题 leetcode 数组专题 06-扫描线算法&#xff08;Sweep Line Algorithm&#xff09; leetcode 数组专题 06-leetcode.218 the-skyline-problem 力扣.218 天际线问题 leetcode 数组专题 06-leetcode.252 meeting room 力扣.252 会议室 leetcode 数组专题 06-leetcod…

STM32 BootLoader 刷新项目 (十) Flash擦除-命令0x56

STM32 BootLoader 刷新项目 (十) Flash擦除-命令0x56 1. STM32F407 BootLoader 中的 Flash 擦除功能详解 在嵌入式系统中&#xff0c;BootLoader 的设计是非常关键的部分&#xff0c;它负责引导主程序的启动、升级以及安全管理。而在 STM32F407 等 MCU 上实现 BootLoader&…

网页抓取API,让数据获取更简单

网页抓取的过程通常分为以下步骤&#xff0c;尤其是在面对静态网页时&#xff1a; 获取页面 HTML&#xff1a;使用 HTTP 客户端下载目标页面的 HTML 内容。解析 HTML&#xff1a;将下载的 HTML 输入解析器&#xff0c;准备提取内容。提取数据&#xff1a;利用解析器功能&#…

Golang语言整合jwt+gin框架实现token

1.下载jwt go get -u github.com/dgrijalva/jwt-go2.新建生成token和解析token文件 2.1 新建common文件夹和jwtConfig文件夹 新建jwtconfig.go文件 2.2 jwtconfig.go文件代码 /* Time : 2021/8/2 下午3:03 Author : mrxuexi File : main Software: GoLand */ package jwtC…

Spring Security SecurityContextHolder组件

在本篇博客中&#xff0c;我们将讨论 Spring Security 的 SecurityContextHolder 组件&#xff0c;包括其实现方式、关键特性&#xff0c;并通过实际示例进行说明。 理解 SecurityContextHolder SecurityContextHolder 是 Spring Security 存储当前安全上下文详细信息的地方。…

详细分析ipvsadm负载均衡的命令

目录 前言1. 基本知识2. 命令参数3. 拓展 前言 LVS四层负载均衡架构详解Lvs推荐阅读&#xff1a;添加链接描述 1. 基本知识 ipvsadm 是用于管理和配置 Linux 服务器上 IP Virtual Server (IPVS) 的工具&#xff0c;是 Linux 提供的一个负载均衡模块&#xff0c;支持多种负载…

量化选股日常操作日记-11-ai眼镜-润欣科技

用 微信小程序 梦想兔企业智能风险分析助手 &#xff0c;选择AI眼镜板块&#xff0c;挖掘了几个合适的股&#xff0c;分析下来感觉 润欣科技 比较安全些适合观察&#xff0c;几块到十几块波动&#xff0c;企业基本面也没有特别大问题。就是现在价位在周期波动高位&#xff0c;下…

云安全之法律和合规

0x00 前言 本文主要内容是从法律&#xff0c;合同&#xff0c;电子举证&#xff0c;以及合规和审计这五个部分来记录一下相关的云安全内容 0x01 法律 受法律约束的影响因素 云服务所在的地区云用户所在的区域数据主体所在的区域 GDPR&#xff1a;通用数据保护法案&#xf…

动力学法测量金属弹性模量

&#x1f3eb;中南民族大学-⚛大学物理实验2-&#x1f4e0;通信工程2024 目录 Python代码 1. 绘制图像 2. 弹性模量数值计算 图像显示 Pycharm 豆包 MarsCode 非常强大&#xff01;有了它们&#xff0c;我在处理大学物理实验的数据及其可视化就非常方便&#xff0c;极大缩减…

鸿蒙的数据存储API存储和读

数据处理: 使用鸿蒙的数据存储API存储和读 随着智能设备的日益普及&#xff0c;高效、安全地管理设备上的数据成为开发者的首要任务。鸿蒙操作系统&#xff08;HarmonyOS&#xff09;作为一款面向未来的全场景分布式操作系统&#xff0c;提供了丰富的API支持&#xff0c;其中数…