vue实战-换皮肤2（使用less实现）
vue实战-换皮肤2（使用less实现）
我的小熊不见了丶
发布于 2019-05-22 21:41:16
发布于 2019-05-22 21:41:16
代码可运行
运行总次数：0
代码可运行
在项目的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()方法直接刷新页面，这也是这个换皮肤的方法的最大的不足之处了，如果有更好的思路的话欢迎指正~
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.02.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
