vue实战-换皮肤2（使用less实现）

在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能。但是这种方法有一个缺陷，那就是只能用css的语法来实现。这个缺陷在某些变态的需求下会增加我们很多工作量，因此本节中将介绍vue中另一种换皮肤的实现思路，用less语法实现换肤。

上节中讲过，想要达到换皮肤的目的无非就是替换掉样式文件，而一般项目中使用less都会在style标签中import样式文件。但是现在我们想要达到动态加载样式文件的效果，因此就不能使用import了，而需要使用另一种引入样式文件的方法require。也就是说在每一个想要根据所选皮肤更改样式的页面都使用require来动态加载样式文件。

在项目的main.js中的methods下新增_getLess方法用来根据当前所选皮肤获取样式文件，但是需要使用到mixin：

Vue.mixin({computed: {...mapGetters(['templates']),},created() {var theme = localStorage.theme;if(theme) {this.templatesMu(theme);}},methods: {...mapMutations(['templatesMu']),_getLess(filepath, filename) {console.log(this.templates)return require("./../static/template/" + this.templates + "/" + filepath + "/" + filename + "/index.less");},},
})

因为用到了vuex，所以还需要import进来：
import { mapState, mapGetters, mapMutations } from 'vuex'
_getLess方法传入两个用来标识样式文件位置的参数，调用该方法会动态的require一个样式文件。this.theme为store中存储的当前皮肤的信息，我们在选择皮肤时会将这个信息存储下来。并且我们要将皮肤相关的样式文件存储在_getLess方法对应的文件夹下。
在vuex中加入方法用于存储当前皮肤信息：

export default {state: {templates: "2",    },getters: {templates(state) {return state.templates;}},mutations: {templatesMu(state, val) {if (val) {state.templates = val;}},},actions: {}
}

在具体的页面中的created方法中调用_getLess方法：

created: () {this._getLess("home","test1");
},

两个标识路径的参数方便程序的扩展。
这样当程序加载这个页面时会首先调用created方法，然后动态加载less样式文件。

然后依旧是那个换皮肤的组件，我们将换皮肤的方法改造一下：

// 存储当前皮肤的信息setTheme(themeFile) {localStorage.theme = themeFile.data;this.$store.commit('templatesMu', themeFile.data);this.show = false;location.reload();}

这样就实现了用less语法来完成换皮肤功能。可以看到换皮肤之后调用了location.reload()方法直接刷新页面，这也是这个换皮肤的方法的最大的不足之处了，如果有更好的思路的话欢迎指正~

vue实战-换皮肤2（使用less实现）相关推荐

vue实战-实现换主题/皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了. 那么我们怎么在vue中实现这个换皮肤的功能呢? 实现思路我们用vue一般都是写 ...
8年前端与众不同的Vue实战系列，助你成为前端顶级开发者
目录一.写这个Vue实战系列专栏的初衷 1. 帮朋友做推荐 2. 市面上卖源码的多,讲实战项目过程的少 3. 想到了自己刚毕业的时候二. 本专栏的优势 1. 需求的适应性强 2. 技术主流三. ...
Asp.Net下通过切换CSS换皮肤
换皮肤的方式有很多种,最简单的通常就是切换页面CSS,而CSS通常写在外部CSS文件里.那么切换css其实就是更换html里的link href路径.我在网上搜索了下.一般有两种方式: 1,在页面放一 ...
Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
3D模型“换皮肤”有多简单？也就一句话的事
丰色发自凹非寺量子位报道 | 公众号 QbitAI 给灰突突的3D模型加"新皮肤",这事儿能有多简单? 现在,只需要一句话就能搞定. 看! 一个普通小台灯,给个" ...
vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据作者:狐狸家的鱼本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
html背景自动换,html页面换皮肤颜色、背景图片（更换页面背景，常驻缓存）刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
editor修改样式 vue_手摸手Electron + Vue实战教程（三）
系列文章: 手摸手Electron + Vue实战教程(一) 手摸手Electron + Vue实战教程(二) ❝ 上一篇我们已经完成了左侧菜单栏的基本样式功能,这一篇我们就主要来开发右侧的Markd ...
vue实战（9）：总结二
整理前一段所做的工作内容 0.其它 vue实战(1):准备与资料整理 vue实战(2):初始化项目.搭建底部导航路由 vue实战(3):底部导航显示.搭建各模块静态页面.添加登录页页面与路由 vue实 ...

vue实战-换皮肤2（使用less实现）

vue实战-换皮肤2（使用less实现）相关推荐

最新文章

热门文章