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>
修改前：
修改后：
原文地址：https://blog.csdn.net/qq_46516788/article/details/143886808
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！