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: ...
随机推荐
- Mysql数据库如何创建用户
创建test用户,密码是1234. MySQL u root -p CREATE USER 'test'@'localhost' IDENTIFIED BY '1234'; #本地登录 CREATE ...
- python 装饰器、递归原理、模块导入方式
1.装饰器原理 def f1(arg): print '验证' arg() def func(): print ' #.将被调用函数封装到另外一个函数 func = f1(func) #.对原函数重新 ...
- Uni2D 入门 -- Skeletal Animation
转载 csdn http://blog.csdn.net/kakashi8841/article/details/17615195 Skeletal Animation Uni2D V2.0 引进了一 ...
- 线程执行synchronized同步代码块时再次重入该锁过程中抛异常,是否会释放锁
一个线程执行synchronized同步代码时,再次重入该锁过程中,如果抛出异常,会释放锁吗? 如果锁的计数器为1,抛出异常,会直接释放锁: 那如果锁的计数器为2,抛出异常,会直接释放锁吗? 来简单测 ...
- vue 学习笔记1
1.子组件在父组件的原生的事件例如一个child子组件的点击事件<child @click="handleClick">点击</child>这种情况在父组件 ...
- xshell连接不上linux情况一
设置网络的地址使用桥接方式
- 665. Non-decreasing Array
Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...
- 581. Shortest Unsorted Continuous Subarray
Given an integer array, you need to find one continuous subarray that if you only sort this subarr ...
- HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)
WebSocket 协议两种URL方案 ws 客户端和服务器之间的非加密流量 wss 客户端和服务器之间的加密流量 WebSocket Secure 表示使用传输层安全性(SSL)的WebSocket ...
- VM虚拟机 Centos7 lnmp环境 配置域名问题 windows浏览器访问的问题
CentOS7 ip地址为 192.168.0.155 搭有 LNMP集成环境 执行 lnmp vhost add 配置服务器 指定目录的域名 mark.com 这时windows 机器的 浏览器想 ...