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使用weixin-js-sdk常见使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了vue-router钩子执行顺序示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue（2.x，3.0）配置跨域代理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了如何解决el-checkbox选中状态更改问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue.js中created()与activated()的个人使用解读
这篇文章主要介绍了vue.js中created()与activated()的个人使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue3父子组件通信之子组件修改父组件传过来的值,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
Vue3+Ant design 实现Select下拉框一键全选/清空功能
在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下2024-05-05
Vue封装一个TodoList的案例与浏览器本地缓存的应用实现
这篇文章主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论