vue实现换肤功能
更新时间：2022年07月01日 15:47:35 作者：不想写代码的程序员
这篇文章主要为大家详细介绍了vue实现换肤功能，一套深色，一套浅色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
公司项目要实现vue项目换肤功能，要求，考虑到最节省时间的就是写两套css，一套light.css，一套dark.css，然后切换css
一、实现思路
切换选中的皮肤状态（light，或者dark）存储在sessionStorage中，监听sessionStorage数据变化，切换index.html中引入的css文件
二、实现过程
1、在main.vue添加：
<p style="display: inline-block;"> 切换主题：</p>
<RadioGroup v-model="theme" @on-change="changeTheme">
<Radio label="light"></Radio>
<Radio label="dark"></Radio>
</RadioGroup>
//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 添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
//添加默认css
<link rel="stylesheet" href="./static/css/dark.css">
<title>xxx</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
//在js添加默认引入的dark.css,如果不引入，ivew自带的样式会覆盖在html中引入的dark.css,所以需要在js重新引入，用来覆盖ivew的默认样式
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "./static/css/dark.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
//监听sessionStorage切换主题
window.addEventListener('setItem', () => {
var themeColor = sessionStorage.getItem('themeColor');
let url = "./static/css/" + themeColor + ".css"
changeStyles(url);
})
function changeStyles(url) {
var links = document.getElementsByTagName("link")
console.log(links)
//替换之前引入的css
if (links.length != 0) {
for (var i = 0; i < links.length; i++) {
// links[i].parentNode.removeChild(links[i]);
links[i].href = url
}
}
var links = document.getElementsByTagName("link")
//console.log(links)
}
</script>4、效果
三、总结
1、在实现的过程中，发现localStorage数据监听不到，在网上的看到数据存储在sessionStorage中
2、css执行顺序需要注意：页面先渲染index.html中head标签引入的dark.css，main.js引入的iview.css后渲染，因此会覆盖head标签引入的dark.css，所以需要在js标签中重新引入一遍。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue-music关于Player播放器组件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue实现各种文件文档下载及导出示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue使用ElemenUI对table的指定列进行合算的方法
这篇文章主要介绍了Vue使用ElemenUI对table的指定列进行合算的方法,本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了VUE如何将方法名字作为变量进行调用问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了Vue开发常用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要给大家介绍了关于axios如何全局注册的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了Vue优化:常见会导致内存泄漏问题及优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了element-ui多文件上传的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vant是一个强大的移动端组件库,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要为大家介绍vue3中的vant组件引入使用的方法,希望对大家有所帮助2023-10-10
这篇文章主要介绍了Vue源码学习之关于对Array的数据侦听实现，Vue使用了一个方式来实现Array类型的监测就是拦截器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
最新评论