需求:实现开发的应用中切换主题色
如果只是需要一个主题色没有切换的需要 完全可以使用uniapp里面uni.scss文件文档
思路:预先在一个公共css中定义你需要的主题颜色,这里只是示例定义了两种颜色
- 参考文档 从中获得思路可以通过动态设置
data-xx从而配合css属性选择器来动态改变主题色 - 本来是想通过
mixin直接混入一个变量来达到全局控住主题色,忽略了minxi的data需要是一个函数 所以返回的值在每个页面之间是不关联的,从而使用vuex,也可以定义一个全局变量uni里面使用全局变量 - 使用
store的原因是潘佳辰大佬使用store实现动态路由以及头部栏的固定 - 上图真机为红米k30ultra 安卓10
实现
- 涉及到的知识点为uniappp vuex(这里我使用了store的模块化)
- 全局css在app.vue里面引入
[data-theme='pink'] {
background-color: pink;
color: #fff;
}
[data-theme='blue'] {
background-color: blue;
color: #fff;
}
- 我们可以在
vuex中定义一个appTheme全局主题变量,并且写入一个函数以此来修改主题变量
const state = {
appTheme: 'pink'
};
const mutations = {
TOGGLE_APP_THEME(state, color = 'pink') { //你可以传入一个颜色参数(需要上面公共css中含有,如果不传入默认为粉色)
console.log(color)
state.appTheme = color
}
}
const getters = {}
const actions = {};
export default {
state,
actions,
mutations,
getters,
namespaced: true
}
//getters中的数据(这里的getters是单个文件)
appTheme(state) {
return state.setting.appTheme
}
- 在单页面中给你所需要设置主题色的dom添加date-them属性
//html
<text :data-theme="appTheme" @tap="toggleAppTheme('pink')">切换主题色</text>
//js
import { mapGetters } from 'vuex';
computed: {
...mapGetters(['appTheme'])
}
- 为了省事我直接在main.js使用mixin混入了
toggleAppTheme函数
Vue.mixin({
methods: {
toggleAppTheme(color = 'blue') {
this.$store.commit('setting/TOGGLE_APP_THEME', color);
}
}
})