现在的app和pc网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就需要一个换皮肤的功能了。
那么我们怎么在vue中实现这个换皮肤的功能呢？
项目结构
-
实现思路
- 我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个html以及一堆静态文件（js、css、img之类）。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css，所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径，使得当用户选择了不同的皮肤，页面引用的css不同从而呈现的样式也不一样。
-
优化策略
- 其实在实际场景中，需要通过切换皮肤来改变css的元素占所有css的比重并不会很多，因此我们需要把需要通过切换改变的css单独提取出来，在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
- 把皮肤相关的css压缩。
实现代码分析
如下是我们的html代码，注意其中的<link rel="stylesheet" name="theme" href="">，其他的都是正常引用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>iView admin</title>
<meta charset="UTF-8">
<!-- -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<!-- 引入的css -->
<link rel="stylesheet" href="//www.greatytc.com/dist/main.css">
<!-- 注意这是我们换皮肤需要的css -->
<link rel="stylesheet" name="theme" href="">
<!-- 图标 -->
<link rel="icon" href="./td_icon.ico" type="image/x-icon"/>
</head>
<body>
<div id="app"></div>
<!-- 用到的js -->
<script type="text/javascript" src="/dist/vender-base.js"></script>
<script type="text/javascript" src="/dist/vender-exten.js"></script>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。
我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview，手机端使用了vant。一共有3套皮肤用于切换。
目录结构
- pc端
<template>
<div style="display:inline-block;padding:0 6px;">
<Dropdown trigger="click" @on-click="setTheme">
<a href="javascript:void(0)">
<Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" type="paintbucket"></Icon>
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem v-for="(item, index) in themeList" :key="index" :name="item.name">
<Row type="flex" justify="center" align="middle">
<span style="margin-right:10px;"><Icon :size="20" :type="item.name.substr(0, 1) !== 'b' ? 'happy-outline' : 'happy'" :color="item.menu"/></span>
<span><Icon :size="22" type="record" :color="item.element"/></span>
</Row>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>
import Cookies from 'js-cookie';
import config from '../../../../build/config.js';
export default {
name: 'themeSwitch',
data () {
return {
themeList: [
{
name: 'black_b',
menu: '#495060',
element: '#2d8cf0'
},
{
name: 'black_g',
menu: '#495060',
element: '#00a854'
},
{
name: 'black_y',
menu: '#495060',
element: '#e96500'
}
]
};
},
methods: {
// 点击切换事件
setTheme (themeFile) {
let menuTheme = themeFile.substr(0, 1);
let mainTheme = themeFile.substr(-1, 1);
if (menuTheme === 'b') {
// 黑色菜单
this.$store.commit('changeMenuTheme', 'dark');
menuTheme = 'dark';
} else {
this.$store.commit('changeMenuTheme', 'light');
menuTheme = 'light';
}
let path = '';
// 取到我们在html上给皮肤的css留的坑并且设置路径
let themeLink = document.querySelector('link[name="theme"]');
let userName = Cookies.get('user');
if (localStorage.theme) {
let themeList = JSON.parse(localStorage.theme);
let index = 0;
let hasThisUser = themeList.some((item, i) => {
if (item.userName === userName) {
index = i;
return true;
} else {
return false;
}
});
if (hasThisUser) {
themeList[index].mainTheme = mainTheme;
themeList[index].menuTheme = menuTheme;
} else {
themeList.push({
userName: userName,
mainTheme: mainTheme,
menuTheme: menuTheme
});
}
localStorage.theme = JSON.stringify(themeList);
} else {
localStorage.theme = JSON.stringify([{
userName: userName,
mainTheme: mainTheme,
menuTheme: menuTheme
}]);
}
let stylePath = '';
if (config.env.indexOf('dev') > -1) {
stylePath = './src/views/main-components/theme-switch/theme/';
} else {
stylePath = 'dist/';
}
if (mainTheme !== 'b') {
path = stylePath + mainTheme + '.css';
} else {
path = '';
}
themeLink.setAttribute('href', path);
}
},
created () {
let path = '';
// 判断运行环境用于切换地址
if (config.env.indexOf('dev') > -1) {
path = './src/views/main-components/theme-switch/theme/';
} else {
path = 'dist/';
}
let name = Cookies.get('user');
// 如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤
if (localStorage.theme) {
let hasThisUser = JSON.parse(localStorage.theme).some(item => {
if (item.userName === name) {
this.$store.commit('changeMenuTheme', item.menuTheme);
this.$store.commit('changeMainTheme', item.mainTheme);
return true;
} else {
return false;
}
});
if (!hasThisUser) {
this.$store.commit('changeMenuTheme', 'dark');
this.$store.commit('changeMainTheme', 'b');
}
} else {
this.$store.commit('changeMenuTheme', 'dark');
this.$store.commit('changeMainTheme', 'b');
}
// 根据用户设置主题
if (this.$store.state.app.themeColor !== 'b') {
let stylesheetPath = path + this.$store.state.app.themeColor + '.css';
// 取到我们在html上给皮肤的css留的坑并且设置路径
let themeLink = document.querySelector('link[name="theme"]');
themeLink.setAttribute('href', stylesheetPath);
}
}
};
</script>
- 手机端
<template>
<div style="display:inline-block;padding:0 6px;">
<div @click="showBtn">换皮肤</div>
<van-actionsheet v-model="show" :actions="themeList" @select="setTheme"/>
</div>
</template>
<script>
import Cookies from "js-cookie";
import { Actionsheet } from "vant";
// import config from "../../../../build/config.js";
export default {
name: "themeSwitch",
components: {
[Actionsheet.name]: Actionsheet
},
data() {
return {
show: false,
themeList: [
{
name: "黑色",
data: "black_b"
},
{
name: "绿色",
data: "black_g"
},
{
name: "黄色",
data: "black_y"
}
]
};
},
methods: {
showBtn() {
this.show = true;
},
setTheme(themeFile) {
themeFile = themeFile.data;
let menuTheme = themeFile.substr(0, 1);
let mainTheme = themeFile.substr(-1, 1);
if (menuTheme === "b") {
// 黑色菜单
this.$store.commit("changeMenuTheme", "dark");
menuTheme = "dark";
} else {
this.$store.commit("changeMenuTheme", "light");
menuTheme = "light";
}
let path = "";
let themeLink = document.querySelector('link[name="theme"]');
let userName = Cookies.get("user");
if (localStorage.theme) {
let themeList = JSON.parse(localStorage.theme);
let index = 0;
let hasThisUser = themeList.some((item, i) => {
if (item.userName === userName) {
index = i;
return true;
} else {
return false;
}
});
if (hasThisUser) {
themeList[index].mainTheme = mainTheme;
themeList[index].menuTheme = menuTheme;
} else {
themeList.push({
userName: userName,
mainTheme: mainTheme,
menuTheme: menuTheme
});
}
localStorage.theme = JSON.stringify(themeList);
} else {
localStorage.theme = JSON.stringify([
{
userName: userName,
mainTheme: mainTheme,
menuTheme: menuTheme
}
]);
}
let stylePath = './';
// stylePath = "./src/view/component/theme-switch/theme/";
// if (config.env.indexOf('dev') > -1) {
// stylePath = 'src/view/component/theme-switch/theme';
// } else {
// stylePath = 'dist/';
// }
if (mainTheme !== "b") {
path = stylePath + mainTheme + ".css";
} else {
path = "";
}
themeLink.setAttribute("href", path);
this.show = false;
}
},
created() {
let path = "";
path = "css/";
// if (config.env.indexOf("dev") > -1) {
// path = "src/view/component/theme-switch/theme";
// } else {
// path = "dist/";
// }
let name = Cookies.get("user");
if (localStorage.theme) {
let hasThisUser = JSON.parse(localStorage.theme).some(item => {
if (item.userName === name) {
this.$store.commit("changeMenuTheme", item.menuTheme);
this.$store.commit("changeMainTheme", item.mainTheme);
return true;
} else {
return false;
}
});
if (!hasThisUser) {
this.$store.commit("changeMenuTheme", "dark");
this.$store.commit("changeMainTheme", "b");
}
} else {
this.$store.commit("changeMenuTheme", "dark");
this.$store.commit("changeMainTheme", "b");
}
console.log(path);
// 根据用户设置主题
if (this.$store.state.app.themeColor !== "b") {
let stylesheetPath = path + this.$store.state.app.themeColor + ".css";
let themeLink = document.querySelector('link[name="theme"]');
themeLink.setAttribute("href", stylesheetPath);
}
}
};
</script>
在首页引用该组件，初次渲染时进入该组件的creat方法，如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤。在store中加入相应方法。
changeMenuTheme (state, theme) {
state.menuTheme = theme;
},
changeMainTheme (state, mainTheme) {
state.themeColor = mainTheme;
}
动态切换最关键的是这两行代码：
let themeLink = document.querySelector('link[name="theme"]')
themeLink.setAttribute('href', stylesheetPath)
但是这个时候我们皮肤相关的css并没有打到代码中，需要我们额外进行配置。
在webpack的配置文件中找到plugins，加入以下插件：
- pc端
new CopyWebpackPlugin([
{
from: 'td_icon.ico'
},
{
from: 'src/styles/fonts',
to: 'fonts'
},
{
from: 'src/views/main-components/theme-switch/theme'
}
],
- 手机端
new CopyWebpackPlugin([
{
from: 'static',
to: 'static'
},
{
from: 'src/view/component/theme-switch/theme',
to: './css'
}
])
之前我们可能已经有了这个插件了，现在只是需要把皮肤相关的css额外配置一下。以上工作完成之后已经可以动态的切换html中皮肤相关的css路径了。接下来就需要我们在需要切换css的地方引用具体的class并且写三套样式分别放在theme中的css文件里。
注意在具体的vue文件中不需要引用theme中的css，因为html中已经帮我们引用了
如果报各种与路径有关的错误那就是你的路径真的写错啦。好好对比一下组件中引用的路径，webpack中配置的路径和你的项目路径吧~
当然这只是换皮肤的一种实现思路，也就是动态切换html中的引用路径。也希望大家集思广益提供更多的解决思路~
