南昌网站推广公司,wordpress编辑管理员,免费查公司信息的网站,网站建设管理内容保障制度前言 关于ElementPlus的基础主题色自定义可以参阅《【VUE】ElementPlus之自定义主题样式和命名空间》 有了上面基础的了解#xff0c;我们知道ElementPlus的主题色调是基于CSS3变量特性进行全局控制的#xff0c; 那么接下来我们也基于CSS3变量来实现主题色调的动态切换效果我们知道ElementPlus的主题色调是基于CSS3变量特性进行全局控制的 那么接下来我们也基于CSS3变量来实现主题色调的动态切换效果
主要控制的色调类型有primary、success、warning、danger、error、info 针对这六个色调类型分别进行0、3、5、7、8、9级的渐变色定制
以下是默认情况下的主题颜色定义 接下来我们基于以下环境来实操下
vue: ^3.3.4vite: ^4.4.11sass: ^1.58.3element-plus: ^2.3.4pinia: ^2.1.7
实现
默认主题色下的按钮组件色调
预想效果
在实现具体交互之前我们先准备几个辅助小工具
颜色状态管理器 既然是动态切换那么我们就需要一个容器来记录当下的一些色调信息便于整体性的调整 以下仅抛个砖具体业务调整根据自己需要来哈~ 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变量设置到document中方便全局调用*/function setPropertyColor(varName, color, funName, level) {level level ? level : 0;funName funName ? funName : lighten;document.documentElement.style.setProperty(varName,ColorUnit[funName](color, level / 10));}/*** 生成主色的其余渐变色并修改对应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,};
});
颜色编码生成工具 根据前言描述我们得知需要根据一个十六进制的色值生成其余的渐变色值出来手动配置的话就太麻烦了 所以我们先来封装一个ColorUnit工具来辅助我们进行色调的配置 // file: src/unit/ColorUnit.js
// 代码载取来至https://gitee.com/lolicode/scui/blob/master/src/utils/color.js
export default {//hex颜色转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颜色转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])}
}整合 有了上面俩个帮手现在整合起来的具体应用 template部分
templatemainel-row stylemargin-bottom: 15pxdiv classdemo-color-warpdiv classdemo-color-box v-for(item, key) in _theme :keykeyclicksetThemeColor(item.color, item.label):style{--color:item.color[0][1]}span classdemo-color__label{{ item.label }}/spanspan classdemo-color__value{{ item.color[0][0] }}/spanspan classdemo-color__value{{ item.color[0][1] }}/spanul classdemo-color__listtemplate v-for(colorItem, colorKey) in item.color :keycolorKeyli v-ifcolorKey0 :style{--color:colorItem[1]}
!-- span{{ colorItem[0] }}/span--
!-- span{{ colorItem[1] }}/span--/li/template/ul/div/divspan当前主题{{ themeName }}/span/el-rowel-row classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/el-rowel-row classmb-4el-button plainPlain/el-buttonel-button typeprimary plainPrimary/el-buttonel-button typesuccess plainSuccess/el-buttonel-button typeinfo plainInfo/el-buttonel-button typewarning plainWarning/el-buttonel-button typedanger plainDanger/el-button/el-rowel-row classmb-4el-button roundRound/el-buttonel-button typeprimary roundPrimary/el-buttonel-button typesuccess roundSuccess/el-buttonel-button typeinfo roundInfo/el-buttonel-button typewarning roundWarning/el-buttonel-button typedanger roundDanger/el-button/el-rowel-rowel-button :iconSearch circle /el-button typeprimary :iconEdit circle /el-button typesuccess :iconCheck circle /el-button typeinfo :iconMessage circle /el-button typewarning :iconStar circle /el-button typedanger :iconDelete circle //el-row/main
/templatescript部分
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
