Vue修改主题的方法

实现思路

(1)通过判定 icon 图标去实现黑白的判断

<!-- 这是vue的伪代码 -->
<!-- 这是其他组件 -->
<template>
  <div id="header">
    <i :class="icon"></i>
  </div>
</template>
<style lang="less" scoped>
  #app {
    /* 后续整体颜色都可以通过var(--themeColor)去实现 */
    --themeColor: white;
  }
</style>

<script>
export default{
  data(){
    return {
      // dark情况下:icon:'xxx-xxx-dark'
      icon:'xxx-xxx-white'
    }
  },
  methods:{
    // 这是使用busevent事件总线传值
    go(){
      bus.$emit('icon',this.icon)
    }
  }
}
</script>

(2)然后通过 busEvent.js 传值

(3)实现这些的前提:在 APP.vue 中得先 var 一个整体颜色—–实现代码如下

<!-- 这是vue的伪代码 -->
<template>
  <div id="app"></div>
</template>

<style lang="less" scoped>
  #app {
    /* 后续整体颜色都可以通过var(--themeColor)去实现 */
    --themeColor: white;
  }
</style>

export default {
  data() {
    return {
      //用于接受其他页面传来的icon
      iconName: ''
    }
  },
  methods: {
    // 这是使用busevent事件总线传值
    // 这里的valStore是在Vuex里面的
    get() {
      bus.$on('icon', val => {
        this.iconName = val
        switch (this.iconName) {
          case 'xxx-xxx-white':
            docment.querrySelector('#app').style.setProptype('--themeColor', valStore)
            break
          case 'xxx-xxx-dark':
            docment.querrySelector('#app').style.setProptype('--themeColor', valStore)
            break
        }
      })
    }
  }
}