切换皮肤代码优化

whyczyk

2021-06-18 daa4c2d1be6596080c9f723eaeae74a4466c917a

切换皮肤代码优化

 src/App.vue

@@ -11,7 +11,6 @@
  data() {
    return {
      fullScreen: false,
      skinActive: 'science-blue'
    }
  },
  watch: {
@@ -20,24 +19,26 @@
    },
    "$store.state.ukey.isIn"(isIn) {
      this.$store.dispatch('ukey/changeId', isIn);
      },
      "$store.state.theme.activeSkin"(val) {
        if (val == 'science-blue') {
          link.href = './theme/science-blue.css';
          this.$store.dispatch("theme/changeThemeName", '科技蓝');
        } else if (val == 'science-black') {
          link.href = './theme/science-black.css';
          this.$store.dispatch("theme/changeThemeName", '优雅黑');
        }
        let iframes = this.$refs.routerView.$el.getElementsByTagName("iframe");
        for (let i = 0; i < iframes.length; i++) {
          iframes[i].contentDocument.getElementById("theme").href = link.href;
        }
    }
  },
  mounted() {
    // 启动ukey监控
    this.$store.dispatch('ukey/load', true);

    this.skinActive = localStorage.getItem('setSkinItem');
    require('./assets/css/m-elementui.css');
    this.appenCss();
    window.addEventListener('setSkinItem', (e) => {
      this.skinActive = e.newValue;
      this.changeSkin();
      let iframes = this.$refs.routerView.$el.getElementsByTagName("iframe");
      for (let i = 0; i < iframes.length; i++) {
        iframes[i].contentDocument.getElementById("theme").href = link.href;
      }
    });
    this.changeSkin();
    require('./assets/css/basic.css');
    require('./assets/css/common.css');
  },
@@ -47,19 +48,13 @@
      link.type = 'text/css';
      link.id = "theme";
      link.rel = 'stylesheet';
        if (this.$store.state.theme.activeSkin == 'science-blue') {
      link.href = './theme/science-blue.css';
        } else if (this.$store.state.theme.activeSkin == 'science-black') {
          link.href = './theme/science-black.css';
        }
      document.getElementsByTagName("head")[0].appendChild(link);
    },
    changeSkin() {
      if (this.skinActive == 'science-black') {
        link.href = './theme/science-black.css';
        this.$store.dispatch("theme/changeThemeName", '优雅黑');
      } else {
        link.href = './theme/science-blue.css';
        this.$store.dispatch("theme/changeThemeName", '科技蓝');
      }

    }
  }
}
</script>

 src/main.js

@@ -46,28 +46,6 @@

import "./global/common"

/**
 * @注册一个全局方法储存skin方法
 * @author (zyk)
 * @param { string } key 键
 * @param { string } data 要存储的数据
 * @returns 
 */
Vue.prototype.$addSkinStorageEvent = function(key, data) {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
        setItem: function(k, val) {
            localStorage.setItem(k, val);
            // 初始化创建的事件
            newStorageEvent.initStorageEvent('setSkinItem', false, false, k, null, val, null, null);
            // 派发对象
            window.dispatchEvent(newStorageEvent);
        }
    }
    return storage.setItem(key, data);
};

new Vue({
    router,
    store,

 src/pages/dataTest/PifuList.vue

@@ -42,9 +42,8 @@
            }
        },
        mounted() {
            let skinActive = localStorage.getItem('setSkinItem');
            this.skinList.forEach((item, index) => {
                if (item.skin == skinActive) {
                if (item.skin == this.$store.state.theme.activeSkin) {
                    this.selectActive = index;
                }
            })
@@ -55,7 +54,7 @@
            },
            changeSkin(item, index) {
                let skin = item.skin;
                this.$addSkinStorageEvent("setSkinItem", skin);
                this.$store.commit("theme/changeTheme", skin);
                this.selectActive = index;
            }
        }

 src/store/modules/theme.js

@@ -6,9 +6,14 @@
            fontTimes: 1,
            close: 0,
            collapse: 0,
            activeSkin: localStorage.getItem('activeSkin') || 'science-blue'
        }
    },
    mutations: {
        changeTheme(state, skin) {
            state.activeSkin = skin;
            localStorage.setItem('activeSkin', skin);
        },
        changeThemeName(state, name) {
            state.themeName = name;
        },