vue实现换肤功能

公司项目要实现vue项目换肤功能，要求，考虑到最节省时间的就是写两套css，一套light.css，一套dark.css，然后切换css

一、实现思路

切换选中的皮肤状态（light，或者dark）存储在sessionStorage中，监听sessionStorage数据变化，切换index.html中引入的css文件

二、实现过程

1、在main.vue添加：

 
 切换主题：
  
        
        
    
    
 //methods:
   changeTheme(){
 //localStorage.setItem('themeColor',this.theme); 
 this.resetSetItem('themeColor', this.theme);
   },

2、main.js添加：（参考网上）

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'themeColor') {

      // 创建一个StorageEvent事件
      var newStorageEvent = document.createEvent('StorageEvent');
      const storage = {
          setItem: function (k, val) {
              sessionStorage.setItem(k, val);

              // 初始化创建的事件
              newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

              // 派发对象
              window.dispatchEvent(newStorageEvent)
          }
      }
      return storage.setItem(key, newVal);
  }
}

3.index.html 添加

  
  
  //添加默认css
  
  



  

4、效果

三、总结

1、在实现的过程中，发现localStorage数据监听不到，在网上的看到数据存储在sessionStorage中
2、css执行顺序需要注意：页面先渲染index.html中head标签引入的dark.css，main.js引入的iview.css后渲染，因此会覆盖head标签引入的dark.css，所以需要在js标签中重新引入一遍。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。