element-plus-自定义Dialog样式

在Element Plus中，要自定义Dialog样式，可以通过CSS覆盖默认的样式。以下是一个简单的例子，展示如何通过外部CSS来修改Element Plus的Dialog样式。

首先，在你的Vue组件中使用Dialog：

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  <el-dialog
    :visible.sync="dialogVisible"
    custom-class="my-dialog"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

然后，在CSS文件中添加自定义样式：

<style>
.my-dialog {
  /* 自定义边框样式 */
  border: 1px solid #3498db;
  /* 自定义背景颜色 */
  background-color: #2980b9;
  /* 自定义标题样式 */
  .el-dialog__title {
    color: #fff;
  }
  /* 自定义内容区域样式 */
  .el-dialog__body {
    color: #fff;
    padding: 20px;
  }
  /* 自定义脚部按钮样式 */
  .dialog-footer .el-button {
    background-color: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
  }
}
</style>

在这个例子中，.my-dialog 类被应用到了Dialog元素上，并且覆盖了默认的边框、背景颜色和按钮颜色等样式。你可以根据需要自定义任何你想要改变的样式属性。