切换皮肤代码优化

whyczyk

2021-06-18 daa4c2d1be6596080c9f723eaeae74a4466c917a

切换皮肤代码优化

 src/App.vue

@@ -5,68 +5,63 @@
</template>

<script>
let link;
export default {
  name: 'App',
  data() {
    return {
      fullScreen: false,
      skinActive: 'science-blue'
    }
  },
  watch: {
    "$store.state.ukey.connect"(isConnet) {
      this.$store.dispatch("ukey/checkIsIn", isConnet);
    },
    "$store.state.ukey.isIn"(isIn) {
      this.$store.dispatch('ukey/changeId', isIn);
    }
  },
  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;
  let link;
  export default {
    name: 'App',
    data() {
      return {
        fullScreen: false,
      }
    });
    this.changeSkin();
    require('./assets/css/basic.css');
    require('./assets/css/common.css');
  },
  methods: {
    appenCss() {
      link = document.createElement('link');
      link.type = 'text/css';
      link.id = "theme";
      link.rel = 'stylesheet';
      link.href = './theme/science-blue.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", '科技蓝');
    watch: {
      "$store.state.ukey.connect"(isConnet) {
        this.$store.dispatch("ukey/checkIsIn", isConnet);
      },
      "$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);
      require('./assets/css/m-elementui.css');
      this.appenCss();
      require('./assets/css/basic.css');
      require('./assets/css/common.css');
    },
    methods: {
      appenCss() {
        link = document.createElement('link');
        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);
      },
    }
  }
}
</script>

<style>
#app {
  box-sizing: border-box;
  height: 100vh;
}
</style>
  #app {
    box-sizing: border-box;
    height: 100vh;
  }
</style>

 src/main.js

@@ -46,30 +46,8 @@

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,
    render: h => h(App),
}).$mount('#app')
}).$mount('#app')

 src/pages/dataTest/PifuList.vue

@@ -7,7 +7,7 @@
                    <el-col :span="12" v-for="(item,index) in skinList" :key="index">
                        <div class="pifu-item">
                            <div class="pifu-item-img" :class="{'full-screen': fullScreen,active:index==selectActive}"
                             @click.stop="changeSkin(item,index)">
                                @click.stop="changeSkin(item,index)">
                                <el-image :src="item.img">
                                    <div slot="placeholder" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
@@ -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;
            }
        }
@@ -67,8 +66,8 @@
        display: flex;
        height: 100%;
    }
	
    .pifu-list-header{

    .pifu-list-header {
        margin-top: 4px;
        margin-left: 4px;
        margin-right: 4px;
@@ -122,4 +121,4 @@
    .pre-pifu:active {
        color: #FF0000;
    }
</style>
</style>

 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;
        },