前端vue换肤实现,vue 皮肤切换
这篇文章主要为大家详细介绍了某视频剪辑软件实现换肤功能，一套深色，一套浅色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
公司项目要实现某视频剪辑软件项目换肤功能，要求，考虑到最节省时间的就是写两套css，一套light.css，一套dark.css，然后切换钢性铸铁
一、实现思路
切换选中的皮肤状态（轻，或者深色)存储在本地存储中，监听本地存储数据变化，切换index.html中引入的钢性铸铁文件
二、实现过程
1、在主界面添加：
p style= display:inline-block；切换主题：/p
单选按钮组v-model= theme @ on-change= change theme
收音机标签=轻/收音机
收音机标签=黑暗/收音机
/单选组
//方法：
changeTheme(){
//本地存储。setitem(主题颜色，this。主题)；
this.resetSetItem(themeColor ，this。主题)；
},
2、主网站添加：(参考网上)
vue。原型。resetsetitem=function(key，newVal) {
if (key===themeColor) {
//创建一个存储事件事件
var newStorageEvent=document。创建事件(“存储事件”)；
常量存储={
setItem: function (k，val) {
sessionStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent。initstorageevent( setItem ，false，false，k，null，val，null，null)；
//派发对象
窗户。调度事件(newStorageEvent)
}
}
返回storage.setItem(key，new val)；
}
}
3.index.html添加
！声明文档类型
超文本标记语言
头
meta charset=utf-8
meta name= viewport content= width=device-width，initial-scale=1.0
//添加默认钢性铸铁
链接版本=样式表href= ./static/css/dark.css
标题XXX/标题
/头
身体
div id=app/div
/body
/html
脚本
//在射流研究…添加默认引入的dark.css，如果不引入，ivew自带的样式会覆盖在超文本标记语言中引入的dark.css，所以需要在射流研究…重新引入，用来覆盖ivew的默认样式
var link=文档。createelement(“link”)；
link.rel=样式表
链接。type= text/CSS ；
link.href= ./静态/CSS/黑暗。CSS ；
var head=文档。getelementsbytagname( head )[0]；
head.appendChild(链接);
//监听本地存储切换主题
窗户。addevent侦听器( setItem ，()={
var主题颜色=会话存储。getitem(主题颜色)；
设url= ./static/css/ themeColor . css
更改样式(URL)；
})
函数更改样式(url) {
var links=文档。getelementsbytagname( link )
console.log(链接)
//替换之前引入的钢性铸铁
if (links.length！=0) {
for(var I=0；一、链接长度；i ) {
//links[I]。父节点。移除子级(链接[I])；
链接[我].href=url
}
}
var links=文档。getelementsbytagname( link )
//console.log(链接)
}
/脚本
4、效果
三、总结
1、在实现的过程中，发现本地存储数据监听不到，在网上的看到数据存储在本地存储中
2、css执行顺序需要注意：页面先渲染index.html中头标签引入的dark.css，main.js引入的iview.css后渲染，因此会覆盖头标签引入的dark.css，所以需要在射流研究…标签中重新引入一遍。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。