vite+vue+ts+element-plus从零开发管理后台框架(17)-主颜色动态设置
之前的主颜色是静态设置的,这里通过颜色选择器选择颜色动态设置。
删除静态设置主颜色#
编辑 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 协议》,转载必须注明作者和本文链接
推荐文章: