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

44次阅读

共计 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');
  },

正文完
 0