共计 778 个字符,预计需要花费 2 分钟才能阅读完成。
若依拆散版(3.7.0),子组件依据不同须要批改父组件 app-main 的背景色彩。
默认色彩是通明,ABC 三个页面,AC 用默认,B 须要更改为 EAEEF4。办法如下:
1.src/store/modules/user.js 减少如下代码:
....
const user = {
state: {
....
appMainBg: 'transparent'
},
mutations: {
....
SET_APP_MAIN_BG: (state, appMainBg) => {state.appMainBg = appMainBg},
},
2.src/permission.js,路由跳转就重置状态 appMainBg 值为默认
router.beforeEach((to, from, next) => {NProgress.start()
if (getToken()) {store.commit('SET_APP_MAIN_BG', 'transparent');
....
3.src/layout/components/AppMain.vue
<template>
<section class="app-main" :style="'background-color:'+appMainBg+';'">
....
</section>
</template>
<script>
export default {
computed: {
// 减少如下代码
appMainBg() {console.log(this.$store.getters.appMainBg);
return this.$store.state.user.appMainBg
},
....
}
}
</script>
4. 指标页面 B。
export default {
....
created() {this.$store.commit('SET_APP_MAIN_BG', '#EAEEF4');
},
正文完