您现在的位置是：网站首页> 编程资料编程资料

vue实现换肤功能_vue.js_

2023-05-24 374人已围观

简介 vue实现换肤功能_vue.js_

公司项目要实现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      xxx  

4、效果

三、总结

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

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

您可能感兴趣的文章:

上一篇：JavaScript 数组方法filter与reduce_javascript技巧_

下一篇：JavaScript数组常用方法解析及数组扁平化_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网