1、需求:用户在管理系统配置app端的颜色,用后端返回主题颜色来更改全局的主题颜色
2、在stores里面请求后端返回的数据
比如:
themeStyle: {
// 后端返回
'--primary-color': '#24C858', // 默认主题颜色
'--primary-second-color': '#BEEACB' // 默认次主题颜色
}
3、在hooks文件新建themeStyle.ts,
内容如下:
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
export const skinStyle = appStore.getThemeStyle
4、在页面使用
导入:
import { skinStyle } from '@/hooks/themeStyle'
在index.vue里面,在元素上设置:style="skinStyle"
<template>
<view class="container" :style="skinStyle">
</view>
</template>
缺点:每个需要的页面都需要导入并且使用
npm i unplugin-auto-import --save-dev 自动导入的在uniapp项目,安装要报错,只能自己手动导入了