ElementPlus修改主題

配置步驟#

在項目中按需引入 ElementPlus

# 選擇一個你喜歡的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

安裝依賴
```
npm install -D sass
```

新建主題文件

// @/style/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #15aabf,
    ),
    "success": (
      "base": #59be00,
    ),
    "warning": (
      "base": #E6A23C,
    ),
    "danger": (
      "base": #fa5252,
    ),
    "error": (
      "base": #fa5252,
    ),
    "info": (
      "base": #c8c6c4,
    ),
  ),
);

修改 vite 配置文件

// vite.config.js
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// 自動引入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      // 配置資源路徑
      "@/": `${path.resolve(__dirname, "src")}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自定義的主題色
        additionalData: `@use "@/style/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // 自動引入
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自動引入修改主題色添加這一行，使用預處理樣式，不添加將會導致使用ElMessage，ElNotification等組件時默認的主題色會覆蓋自定義的主題色
          importStyle: "sass",
        }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          // 自動引入修改主題色添加這一行，使用預處理樣式
          importStyle: "sass",
        }),
      ],
    }),
  ],
});

main.ts中引入element-plus樣式文件
```
import 'element-plus/dist/index.css'
```

效果#

<template>
  <el-row class="mb-4">
    <el-button>默認</el-button>
    <el-button type="primary">主要</el-button>
    <el-button type="success">成功</el-button>
    <el-button type="info">信息</el-button>
    <el-button type="warning">警告</el-button>
    <el-button type="danger">危險</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>簡單</el-button>
    <el-button type="primary" plain>主要</el-button>
    <el-button type="success" plain>成功</el-button>
    <el-button type="info" plain>信息</el-button>
    <el-button type="warning" plain>警告</el-button>
    <el-button type="danger" plain>危險</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>圓形</el-button>
    <el-button type="primary" round>主要</el-button>
    <el-button type="success" round>成功</el-button>
    <el-button type="info" round>信息</el-button>
    <el-button type="warning" round>警告</el-button>
    <el-button type="danger" round>危險</el-button>
  </el-row>

  <div class="mb-4">
    <el-button plain @click="open1"> 成功 </el-button>
    <el-button plain @click="open2"> 警告 </el-button>
    <el-button plain @click="open3"> 信息 </el-button>
    <el-button plain @click="open4"> 錯誤 </el-button>
  </div>
  <el-alert title="成功警報" type="success" class="mb-4" />
  <el-alert title="信息警報" type="info" class="mb-4" />
  <el-alert title="警告警報" type="warning" class="mb-4" />
  <el-alert title="錯誤警報" type="error" class="mb-4" />
  <el-button @click="dialogVisible = true" class="mb-4">
    打開對話框
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="30%"
    :before-close="handleClose"
  >
    <span>這是一條消息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          確認
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElNotification, ElMessageBox } from "element-plus";
import { ref } from "vue";

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("你確定要關閉這個對話框嗎？")
    .then(() => {
      done();
    })
    .catch(() => {
      // 捕獲錯誤
    });
};

const open1 = () => {
  ElNotification({
    title: "成功",
    message: "這是一條成功消息",
    type: "success",
  });
};

const open2 = () => {
  ElNotification({
    title: "警告",
    message: "這是一條警告消息",
    type: "warning",
  });
};

const open3 = () => {
  ElNotification({
    title: "信息",
    message: "這是一條信息消息",
    type: "info",
  });
};

const open4 = () => {
  ElNotification({
    title: "錯誤",
    message: "這是一條錯誤消息",
    type: "error",
  });
};
</script>
<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style>