vue项目网站换肤
由于我网站不是的单色,换动的样式有点多,所以我只能通过后端传给我的不同的皮肤类型,来控制不同的样式文件
在网上查了一堆,每一个有用的
if(store.getters.infoType==1){
require("./static/styles/skin.css");
}else if(store.getters.infoType==2){
require("./static/styles/skin2.css");
}else if(store.getters.infoType==3){
require("./static/styles/skin3.css");
}
这种方法不成立,本地有效打包之后vue默认会用最后一个的样式,做不到切换
想到以前用jquery操作不同的样式文件,试了下还真的实现了
1,首先在脚手架的index,html文件里面加入一个假的link
changeSkin(){
var Link=document.querySelector(".skinLink");
/*通过js获取到这个DOM元素然后给他加不同的样式即可*/
if(this.infoType==1){
Link.setAttribute("href","./static/styles/skin.css");
}else if(this.infoType==2){
Link.setAttribute("href","./static/styles/skin2.css");
}else if(this.infoType==3){
Link.setAttribute("href","./static/styles/skin3.css");
}
}
3由于我是通过vuex做的数据存储,刷新页面数据消失
所以在main.js里面我要再次去做以上请求,不要忘记了否则刷新就什么度没了
vue项目网站换肤的更多相关文章
- 基于webpack4+vue-cli3项目的换肤功能
起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...
- vue+ element 动态换肤
转至 https://www.cnblogs.com/dengqichang/p/10364455.html 一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://elem ...
- link rel=alternate网站换肤功能
此方法借助HTML rel属性的alternate属性值实现. <link href="reset.css" rel="stylesheet" type= ...
- react实现网站换肤功能
一.目标 提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理 1.准备不同主题色的样式文件: 2.将用户的选择记录在本地缓存中: 3.每次进入应用时,读取缓存 ...
- Android App插件式换肤实现方案
背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...
- jquery.cookie中的操作之与换肤
jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- Android项目中的换肤总结
纵观现在各种Android app,其换肤需求可以归为 白天/黑夜主题切换(或者别的名字,通常2套),如同花顺/自选股/天天动听等,UI表现为一个switcher. 多种主题切换,通常为会员特权,如Q ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
随机推荐
- python实现排序算法二:归并排序
##归并排序 ##基本思想:对于两个排好序的数组A和B,逐一比较A和B的元素,将较小值放入数组C中,当A或者B数组元素查询完后,将A或者B剩余的元素直接添加到C数组中,此时C数组即为有序数组,这就是归 ...
- 29.Junit测试框架.md
目录 作用 使用 单个对象的测试 有步骤的测试 注意 作用 用于简化测试,可以对方法,类,包等范围测试 使用 单个对象的测试 在需要测试的方法上加注解@Test,选中方法,运行里选择junit执行 同 ...
- arcgis python arcpy add data script添加数据脚本
arcgis python arcpy add data script添加数据脚本mxd = arcpy.mapping.MapDocument("CURRENT")... df ...
- C#中属性和字段的区别
属性和字段的区别 在C#中,我们可以非常自由的.毫无限制的访问公有字段,但在一些场合中,我们可能希望限制只能给字段赋于某个范围的值.或是要求字段只能读或只能写,或是在改变字段时能改变对象的其他一些状态 ...
- mysql主从复制以及读写分离
之前我们已经对LNMP平台的Nginx做过了负载均衡以及高可用的部署,今天我们就通过一些技术来提升数据的高可用以及数据库性能的提升. 一.mysql主从复制 首先我们先来看一下主从复制能够解决什么问题 ...
- zabbix 监控端口
监控HTTPD端口的shell #!/bin/bash #2019年4月19日18:: ####### httpd=` netstat -tnlp|grep httpd|awk '{print $4} ...
- multi role
mesos 1.2.0实验性的支持了一个框架多个role. message FrameworkInfo { ... // Roles are the entities to which allocat ...
- SVN获取最新代码,完成后续开发
1.新建一个文件夹,鼠标右键点击文件夹,点击Checkout 2.填写两个路径(项目路径和下载到路径),并确认“ok”
- python 内置函数(二) 进阶函数 递归内容及二分法查找 知识点
1,lambda: 匿名函数 2.sorgted() 排序函数 3,filter() 过滤函数 筛选 4,map() 映射函数 5.递归 6.二分法 一. 匿名函数: lambda lamb ...
- 【C++】c++11多线程初探
相关头文件c++11 新标准中引入了四个头文件来支持多线程编程,他们分别是<atomic> ,<thread>,<mutex>,<condition_vari ...