-
现在的
app
和
pc<
/p>
网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就
需要一个换皮肤的功能了。
那么我们怎么
在
vue
中实现这个换皮肤的功能呢？
第一步：同步多套
css
样式
第二步：换肤入口
第三步
：切换主题，调用对应
css
样式
下面具体以项目详细介绍
项目结构
实现思路
我们用
vue
一般都是写单页面程序，
因此在实际发布的时候只有
一个
html
以及一堆静态文件
（
js
、
css
、<
/p>
img
之类）
。而在
html
中引用了这些
js
和
css
。我们要换皮肤的话其实就是动态的去切换
< br>css
，所以在这里实现
换皮肤其实也就是动态的更改<
/p>
html
中引用
css
< br>的路径，使得当用户选择了不同的皮肤，页面引用的
css
不
同从而呈现的样式也不一样。
优化策略
其实在实际场景中，
需要通过切换皮肤来改变
css
的元素占所有
css
的比重并不会很多，
因此我们需
要把需
要通过切换改变的
css
单独提
取出来，在动态改变
css
路径时只需要去改变这个控制皮肤的
css
就可以了。
< br>把皮肤相关的
css
压缩。
实现代码分析
如下是我们的
html
代码，
注意其中的
，
其他的都是正常引用。
<
/p>
接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选
中选项后皮肤
生效。
我们将换皮肤功能抽成一个组件
theme-switch
。
pc
端使用
iv
iew
，手机端使用了
vant
。一共
有
3
套皮肤用
于切换。
目录结构
pc
端
<
template
>
<
div
style
=
display:inline-
block;padding:0 6px;
<
Dropdown trigger
=
click
@on-click
=
setTheme
<
a href
=
javascrip
t:void(0)
<
Icon
:style
=
{marginTop: '-2px',
verticalAlign: 'middle'}
color
=
#495060
:size
=
18
type
=
pain
tbucket
Icon
>
<
Icon
type
=
arrow-
down-b
Icon
>
a
>
<
DropdownMenu sl
ot
=
list
<
DropdownItem
v-for
=
(item, index) in
themeList
:key
=
index
:name
=
<
Row type
=
flex
justify
=
center
align
=
middle
<
span style
=
margi
n-
right:10px;
Icon
:size
=
20
:type
=
(0, 1) !== 'b' ?
'happy-
outline' :
'happy'
:color
=
span
>
<
span
><
Icon :size
=
22
type
=
record
< br>
:color
=
t
span
>
Row
>
DropdownItem
>
DropdownMenu
>
Dropdown
>
div
>
template
>
<
script
>
import Cookies from 'js-cookie';
import config from
'../../../../build/';
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 = (0, 1);
let
mainTheme = (-1, 1);
if
(menuTheme === 'b') {
//
黑色菜单
this.$$('changeMenuTheme', 'dark');
menuTheme = 'dark';
} else
{
this.$$('changeMenuTheme', 'light');
menuTheme = 'light';
}
let path = '';
//
取到我们在
html
上给皮肤的
css
留的坑并且设置路径
let themeLink =
elector('link[name=
let
userName = ('user');
if ()
{
let themeList = ();
let index = 0;
let hasThisUser =
((item, i) => {
if
(me === userName) {
index = i;
return true;
} else
{
return false;
}
});
if (hasThisUser) {
themeList[index].mainTheme = mainTheme;
themeList[index].menuTheme = menuTheme;
} else {
({
userName:
userName,
mainTheme: mainTheme,
menuTheme: menuTheme
});
}
= ify(themeList);
} else {
= ify([{
userName: userName,
mainTheme: mainTheme,
menuTheme: menuTheme
}]);
}
let stylePath = '';
if
(f('dev') > -1) {
stylePath = './src/views/main-components/theme-
switch/theme/';
} else {
stylePath = 'dist/';
}
if
(mainTheme !== 'b') {
path = stylePath + mainTheme + '.css';
} else {
path = '';
}
ribute('href', path);
}
},
created () {
let path = '';
//
判断运行环境用于切换地址
if (f('dev') > -1) {
path =
'./src/views/main-components/theme-switch/theme/';
} else {
path = 'dist/';
}
let name = ('user');
//
如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤
if () {
let hasThisUser = ().some(item => {
if (me === name) {
this.$$('changeMenuTheme', eme);
this.$$('changeMainTheme', eme);