現(xiàn)在的app和pc網(wǎng)站做的越來(lái)越花哨鸽心，但是有時(shí)候用戶(hù)并不喜歡你給他挑選好的主題顏色瞒滴，這個(gè)時(shí)候就需要一個(gè)換皮膚的功能了姨夹。
那么我們?cè)趺丛趘ue中實(shí)現(xiàn)這個(gè)換皮膚的功能呢夸溶？
項(xiàng)目結(jié)構(gòu)
-
實(shí)現(xiàn)思路
- 我們用vue一般都是寫(xiě)單頁(yè)面程序吴旋，因此在實(shí)際發(fā)布的時(shí)候只有一個(gè)html以及一堆靜態(tài)文件（js剧辐、css、img之類(lèi)）邮府。而在html中引用了這些js和css荧关。我們要換皮膚的話其實(shí)就是動(dòng)態(tài)的去切換css，所以在這里實(shí)現(xiàn)換皮膚其實(shí)也就是動(dòng)態(tài)的更改html中引用css的路徑褂傀，使得當(dāng)用戶(hù)選擇了不同的皮膚忍啤，頁(yè)面引用的css不同從而呈現(xiàn)的樣式也不一樣。
-
優(yōu)化策略
- 其實(shí)在實(shí)際場(chǎng)景中仙辟，需要通過(guò)切換皮膚來(lái)改變css的元素占所有css的比重并不會(huì)很多同波，因此我們需要把需要通過(guò)切換改變的css單獨(dú)提取出來(lái)，在動(dòng)態(tài)改變css路徑時(shí)只需要去改變這個(gè)控制皮膚的css就可以了叠国。
- 把皮膚相關(guān)的css壓縮未檩。
實(shí)現(xiàn)代碼分析
如下是我們的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="/dist/main.css">
<!-- 注意這是我們換皮膚需要的css -->
<link rel="stylesheet" name="theme" href="">
<!-- 圖標(biāo) -->
<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>
接下來(lái)就是具體實(shí)現(xiàn)換皮膚功能了，換皮膚一般都是點(diǎn)擊一個(gè)按鈕彈出一些皮膚的選項(xiàng)项棠，選中選項(xiàng)后皮膚生效悲雳。
我們將換皮膚功能抽成一個(gè)組件theme-switch。pc端使用iview香追，手機(jī)端使用了vant合瓢。一共有3套皮膚用于切換。
目錄結(jié)構(gòu)
- 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: {
// 點(diǎn)擊切換事件
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 = '';
// 取到我們?cè)趆tml上給皮膚的css留的坑并且設(shè)置路徑
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 = '';
// 判斷運(yùn)行環(huán)境用于切換地址
if (config.env.indexOf('dev') > -1) {
path = './src/views/main-components/theme-switch/theme/';
} else {
path = 'dist/';
}
let name = Cookies.get('user');
// 如果用戶(hù)之前選擇過(guò)皮膚則直接使用之前選擇的透典，否則使用默認(rèn)皮膚
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');
}
// 根據(jù)用戶(hù)設(shè)置主題
if (this.$store.state.app.themeColor !== 'b') {
let stylesheetPath = path + this.$store.state.app.themeColor + '.css';
// 取到我們?cè)趆tml上給皮膚的css留的坑并且設(shè)置路徑
let themeLink = document.querySelector('link[name="theme"]');
themeLink.setAttribute('href', stylesheetPath);
}
}
};
</script>
- 手機(jī)端
<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);
// 根據(jù)用戶(hù)設(shè)置主題
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>
在首頁(yè)引用該組件晴楔，初次渲染時(shí)進(jìn)入該組件的creat方法，如果用戶(hù)之前選擇過(guò)皮膚則直接使用之前選擇的峭咒，否則使用默認(rèn)皮膚税弃。在store中加入相應(yīng)方法。
changeMenuTheme (state, theme) {
state.menuTheme = theme;
},
changeMainTheme (state, mainTheme) {
state.themeColor = mainTheme;
}
動(dòng)態(tài)切換最關(guān)鍵的是這兩行代碼：
let themeLink = document.querySelector('link[name="theme"]')
themeLink.setAttribute('href', stylesheetPath)
但是這個(gè)時(shí)候我們皮膚相關(guān)的css并沒(méi)有打到代碼中讹语，需要我們額外進(jìn)行配置钙皮。
在webpack的配置文件中找到plugins，加入以下插件：
- pc端
new CopyWebpackPlugin([
{
from: 'td_icon.ico'
},
{
from: 'src/styles/fonts',
to: 'fonts'
},
{
from: 'src/views/main-components/theme-switch/theme'
}
],
- 手機(jī)端
new CopyWebpackPlugin([
{
from: 'static',
to: 'static'
},
{
from: 'src/view/component/theme-switch/theme',
to: './css'
}
])
之前我們可能已經(jīng)有了這個(gè)插件了，現(xiàn)在只是需要把皮膚相關(guān)的css額外配置一下短条。以上工作完成之后已經(jīng)可以動(dòng)態(tài)的切換html中皮膚相關(guān)的css路徑了导匣。接下來(lái)就需要我們?cè)谛枰袚Qcss的地方引用具體的class并且寫(xiě)三套樣式分別放在theme中的css文件里。
注意在具體的vue文件中不需要引用theme中的css茸时，因?yàn)閔tml中已經(jīng)幫我們引用了
如果報(bào)各種與路徑有關(guān)的錯(cuò)誤那就是你的路徑真的寫(xiě)錯(cuò)啦贡定。好好對(duì)比一下組件中引用的路徑，webpack中配置的路徑和你的項(xiàng)目路徑吧~
當(dāng)然這只是換皮膚的一種實(shí)現(xiàn)思路可都，也就是動(dòng)態(tài)切換html中的引用路徑缓待。也希望大家集思廣益提供更多的解決思路~
