vue3 Element-plus修改内置样式复现代码

news2025/4/19 14:22:50

笔者在修改Element-plus的内置样式时，遇到一点挫折，现提供需求场景与解决方案。

一、实现（1）透明弹窗可拖拽，且不影响点击弹窗外内容；（2）弹窗内置表格，表格需修改样式颜色，且鼠标放置在某一行时改变该行样式。

vue3中的模板：定义一个点击弹窗按钮，弹出弹窗内容；定义一个其它按钮，显示不影响点击弹窗外内容的功能。

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = !dialogVisible">点击弹窗</el-button>
    <el-button type="primary" @click="qita">其它</el-button>
    <div>
      <el-dialog
        v-model="dialogVisible"
        title="可拖拽对话框"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
        :modal="false"
        @close="handleClose"
        :before-close="preventClose"
      >
        <div>
          <el-table :data="tableData" border style="width: 100%;text-align: center">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

vue3中setup代码，主要是阻止对话框的关闭，以及对页面的穿透，实现可点击弹窗外内容的功能。

<script setup>
  import { onMounted, ref } from 'vue';

  let dialogVisible = ref(false);

  const preventClose = (done) => {
    done(false); // 阻止对话框关闭
  };
  const handleClose = () => {
    console.log('对话框关闭');
  };
  onMounted(() => {
    var box = document.querySelector(".el-overlay-dialog");
    // 获取.el-overlay-dialog父级
    var boxa = box.parentNode;
    // 使用pointerEvents 进行页面穿透
    boxa.style.pointerEvents = 'none';
  });
  let qita = () =>{
    alert("其它")
  }
  const tableData = ref([
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ])
</script>

最重要的内置样式修改，更改弹窗样式，更改表格样式。

<style scoped lang="less">
/* 实现弹窗可拖拽、消除遮罩层 */
:deep(.el-dialog) {
  position: absolute;
  z-index: 2000 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
:deep(.pointer){
  pointer-events: auto !important;
}
/* 更改弹窗样式 */
:deep(.el-dialog__title) {
  font-weight: 900;
}
:deep(.el-dialog__header){
  color: #fff;
  background: rgba(197, 92, 92, 0.5);
  text-align: center;
}
:deep(.el-dialog__body){
  padding: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  text-align: left;
}
/* 更改表格样式 */
.el-table {
  --el-table-border-color: #888888;
  --el-table-text-color: white;
  --el-table-header-text-color: white;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
  @media (prefers-color-scheme: light) {
    --el-table-text-color: #ffffff;
    --el-table-header-text-color: #ffffff;
  }
}
:deep(.el-table__header-wrapper) {
  background: #e2a8a8;
  opacity: 0.7;
}
:deep(.el-table__body-wrapper) {
  background: #b09d9d;
  opacity: 0.7;
}
/* 表格内容居中 */
:deep(.el-table .cell){
  text-align: center;
}
/* 新增悬停高亮样式 */
:deep(.el-table__body tr:hover > td) {
  background: rgb(57, 116, 185) !important;
  cursor: pointer;
}
</style>

最后，附上运行效果图：