关于vue.js:若依分离版370子组件根据不同需要修改父组件appmain的背景颜色

若依拆散版(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');
  },

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理