ElementPlus修改主题

配置步骤

在项目中按需引入 ElementPlus

Copy
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

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

Copy
// 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()],
}),
],
})

安装依赖

Copy
npm install -D sass

新建主题文件

Copy
// @/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 配置文件

Copy
// 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样式文件

Copy
import 'element-plus/dist/index.css'

效果

Copy

<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>

<el-row class="mb-4">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</el-row>

<el-row class="mb-4">
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</el-row>


<el-button plain @click="open1"> Success </el-button>
<el-button plain @click="open2"> Warning </el-button>
<el-button plain @click="open3"> Info </el-button>
<el-button plain @click="open4"> Error </el-button>

<el-alert title="success alert" type="success" class="mb-4" />
<el-alert title="info alert" type="info" class="mb-4" />
<el-alert title="warning alert" type="warning" class="mb-4" />
<el-alert title="error alert" type="error" class="mb-4" />
<el-button @click="dialogVisible = true" class="mb-4">
打开对话框
</el-button>

<el-dialog
v-model="dialogVisible"
title="Tips"
width="30%"
:before-close="handleClose"
>
This is a message


<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>


</el-dialog>



import { ElNotification, ElMessageBox } from "element-plus";
import { ref } from "vue";

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
ElMessageBox.confirm("Are you sure to close this dialog?")
.then(() => {
done();
})
.catch(() => {
// catch error
});
};

const open1 = () => {
ElNotification({
title: "Success",
message: "This is a success message",
type: "success",
});
};

const open2 = () => {
ElNotification({
title: "Warning",
message: "This is a warning message",
type: "warning",
});
};

const open3 = () => {
ElNotification({
title: "Info",
message: "This is an info message",
type: "info",
});
};

const open4 = () => {
ElNotification({
title: "Error",
message: "This is an error message",
type: "error",
});
};


.mb-4 {
margin-bottom: 16px;
}
