当前位置：首页 > article >正文

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

article 2024/11/20 7:19:48

前言：当我们用 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>