vite+vue+ts+element-plus从零开发管理后台框架(17)-主颜色动态设置
5 / 0 / 创建于 2周前
mirahs 的个人博客
之前的主颜色是静态设置的，这里通过颜色选择器选择颜色动态设置。
删除静态设置主颜色
编辑src/style.css，删除如下静态主颜色样式。
:root {
--el-color-primary: red;
}
:root.dark {
--el-color-primary: red;
}颜色 Store
新建src/store/color.ts，内容如下。主要是有一个primary主颜色的属性并且默认是element-plus的主颜色，持久化数据，预定义了7个颜色，primaryChange是颜色选择器实时改变更新网页属性的回调，primarySave是颜色选择器确定颜色时的回调。
import { defineStore } from 'pinia'
const useColorStore = defineStore('appcolor', {
state: () => {
const primary = '#409eff'
return {
primary,
}
},
persist: true,
getters: {
primaryPredefines(): string[] {
return ['#FF0000 ', '#FF7F00', '#FFFF00 ', '#00FF00 ', '#00FFFF ', '#0000FF', '#8B00FF']
}
},
actions: {
primaryChange(val: string | null) {
if (!val) return
const el = document.documentElement
el.style.setProperty('--el-color-primary', val)
},
primarySave(val: string | null) {
if (!val) return
this.primary = val
}
}
})
export default useColorStore使用 Store
编辑src/views/Main.vue，导入并实例化颜色Store。
import useMenuStore from '@/store/menu'
import useColorStore from '@/store/color'const menuStore = useMenuStore()
const colorStore = useColorStore()template段header-right下最前面添加如下代码
<el-color-picker v-model="colorStore.primary" show-alpha :predefine="colorStore.primaryPredefines"
@active-change="colorStore.primaryChange" @change="colorStore.primarySave"
style="margin-right: 15px;" />预览和设置主颜色
这样就达到了颜色选择器改变颜色的同时改变网页主颜色，并且只有点击了OK按钮才会最终应用这个主颜色，如果点击了空白区域关闭颜色选择器就会退回到之前的主颜色。
初始化主颜色
虽然已经能动态设置主颜色了，但当我们刷新浏览器后显示的主颜色跟最后设置的主颜色不一样，原因是网页重新加载后没有初始化主颜色。
编辑src/App.vue，导入和初始化主颜色。
import { useDark } from '@vueuse/core'
import useColorStore from '@/store/color'
useDark()
const colorStore = useColorStore()
colorStore.primaryChange(colorStore.primary)再设置主颜色并刷新浏览器，发现主颜色已经初始化了。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：