uniapp更改主题颜色

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项目,安装要报错,只能自己手动导入了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值