前言
關(guān)于ElementPlus的基礎(chǔ)主題色自定義可以參閱《【VUE】ElementPlus之自定義主題樣式和命名空間》
有了上面基礎(chǔ)的了解，我們知道ElementPlus的主題色調(diào)是基于CSS3變量特性進行全局控制的，
那么接下來我們也基于CSS3變量來實現(xiàn)主題色調(diào)的動態(tài)切換效果；
主要控制的色調(diào)類型有：primary、success、warning、danger、error、info
針對這六個色調(diào)類型分別進行0、3、5、7、8、9級的漸變色定制
以下是默認情況下的主題顏色定義：
接下來，我們基于以下環(huán)境來實操下：
- vue:
^3.3.4 - vite:
^4.4.11 - sass:
^1.58.3 - element-plus:
^2.3.4 - pinia:
^2.1.7
實現(xiàn)
默認主題色下的按鈕組件色調(diào)：
預(yù)想效果：
在實現(xiàn)具體交互之前，我們先準備幾個輔助小工具
顏色狀態(tài)管理器
既然是動態(tài)切換，那么我們就需要一個容器來記錄當下的一些色調(diào)信息，便于整體性的調(diào)整
以下僅拋個磚，具體業(yè)務(wù)調(diào)整根據(jù)自己需要來哈~
import { defineStore } from "pinia";
import ColorUnit from "@/unit/ColorUnit";
export const useColorStore = defineStore("color", () => {
function setThemeColor(colorMap) {
let _namespace = "el";
colorMap.forEach((colorItem) => {
setPropertyColor(`--${_namespace}-color-${colorItem[0]}`, colorItem[1]);
themeColorGradient(`--${_namespace}-color-${colorItem[0]}-light-#level#`,"lighten",colorItem[1]);
setPropertyColor(`--${_namespace}-color-${colorItem[0]}-dark-2`,colorItem[1],"darken");
// themeColorGradient(`--${_namespace}-color-${colorItem[0]}-dark-#level#`,"darken",colorItem[1]);
});
}
/**
* 將css3變量設(shè)置到document中方便全局調(diào)用
*/
function setPropertyColor(varName, color, funName, level) {
level = level ? level : 0;
funName = funName ? funName : "lighten";
document.documentElement.style.setProperty(
varName,
ColorUnit[funName](color, level / 10)
);
}
/**
* 生成主色的其余漸變色并修改對應(yīng)CSS3變量值
*/
function themeColorGradient(varName, funName, themeColor, themeLevel) {
themeColor = themeColor ? themeColor : '#409eff';
themeLevel = themeLevel ? themeLevel : [3, 5, 7, 8, 9];
themeLevel.forEach(function (level) {
setPropertyColor(
varName.replace("#level#", level),
themeColor,
funName,
level
);
});
}
return {
setThemeColor,
};
});
顏色編碼生成工具
根據(jù)前言描述，我們得知，需要根據(jù)一個十六進制的色值，生成其余的漸變色值出來，手動配置的話就太麻煩了
所以我們先來封裝一個ColorUnit工具來輔助我們進行色調(diào)的配置
// file: src/unit/ColorUnit.js
// 代碼載取來至：https://gitee.com/lolicode/scui/blob/master/src/utils/color.js
export default {
//hex顏色轉(zhuǎn)rgb顏色
HexToRgb(str) {
str = str.replace("#", "")
var hxs = str.match(/../g)
for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16)
return hxs
},
//rgb顏色轉(zhuǎn)hex顏色
RgbToHex(a, b, c) {
var hexs = [a.toString(16), b.toString(16), c.toString(16)]
for (var i = 0; i < 3; i++) {
if (hexs[i].length == 1) hexs[i] = "0" + hexs[i]
}
return "#" + hexs.join("");
},
//加深
darken(color, level) {
var rgbc = this.HexToRgb(color)
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
},
//變淡
lighten(color, level) {
var rgbc = this.HexToRgb(color)
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
}
}
整合
有了上面?zhèn)z個幫手，現(xiàn)在整合起來的具體應(yīng)用
template部分文章來源：http://www.zghlxwxcb.cn/news/detail-718877.html
<template>
<main>
<el-row style="margin-bottom: 15px">
<div class="demo-color-warp">
<div class="demo-color-box" v-for="(item, key) in _theme" :key="key"
@click="setThemeColor(item.color, item.label)"
:style="{'--color':item.color[0][1]}">
<span class="demo-color__label">{{ item.label }}</span>
<span class="demo-color__value">{{ item.color[0][0] }}</span>
<span class="demo-color__value">{{ item.color[0][1] }}</span>
<ul class="demo-color__list">
<template v-for="(colorItem, colorKey) in item.color" :key="colorKey">
<li v-if="colorKey>0" :style="{'--color':colorItem[1]}">
<!-- <span>{{ colorItem[0] }}</span>-->
<!-- <span>{{ colorItem[1] }}</span>-->
</li>
</template>
</ul>
</div>
</div>
<span>當前主題：{{ themeName }}</span>
</el-row>
<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-row>
<el-button :icon="Search" circle />
<el-button type="primary" :icon="Edit" circle />
<el-button type="success" :icon="Check" circle />
<el-button type="info" :icon="Message" circle />
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />
</el-row>
</main>
</template>
script部分文章來源地址http://www.zghlxwxcb.cn/news/detail-718877.html
<script setup>
import {ref} from "vue"
import { useColorStore } from "@/stores/color";
// ...
const themeName = ref('默認主題');
const colorStore = useColorStore();
// ...
let _theme = [
{label:'默認主題', color:[["primary", "#409EFF"], ["success", "#67C23A"], ["warning", "#E6A23C"], ["danger", "#F56C6C"], ["error", "#F56C6C"], ["info", "#909399"]]},
{label:'自定義主題1', color:[["primary", "#1984f3"], ["success", "#55DE12"], ["warning", "#EA9412"], ["danger", "#E12020"], ["error", "#E12020"], ["info", "#209399"]]},
{label:'自定義主題2', color:[["primary", "#0A4680"], ["success", "#276409"], ["warning", "#815410"], ["danger", "#931d1d"], ["error", "#931D1D"], ["info", "#454A55"]]},
];
// ...
function setThemeColor(colorMap, label) {
themeName.value = label;
colorStore.setThemeColor(colorMap);
}
// ...
</script>
到了這里，關(guān)于【VUE】ElementPlus之動態(tài)主題色調(diào)切換(Vue3 + Element Plus+Scss + Pinia)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
