vue实现换主题\皮肤功能

现在的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="/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 = 'css/';//   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中的引用路径。也希望大家集思广益提供更多的解决思路~

vue实现换主题\皮肤功能相关推荐

vue实战-实现换主题/皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了. 那么我们怎么在vue中实现这个换皮肤的功能呢? 实现思路我们用vue一般都是写 ...
jQuery实现无刷新切换主题皮肤功能
主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 实现该功能的原理就是通过点击定义的 ...
Android 实现切换主题皮肤功能（类似于众多app中的夜间模式，主题包等）
首先来个最简单的一键切换主题功能,就做个白天和晚上的主题好了. 先看我们的styles文件: 1 <resources>2 3 <!-- Base application theme ...
Java实战之管家婆记账系统（22）——实现修改软件主题皮肤功能
本节概要本节实现修改界面皮肤的功能,即使整个程序应用不同的CSS样式. 实现功能关于软件不同的皮肤要能保存起来,即在软件关闭后再次重启也能显示改变的皮肤,因此需要将其保存在电脑本地,所以在prop ...
iOS App主题皮肤切换功能简介和具体实现详解附有源码
分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 0.换肤的应用场景一般情况下某些App在节假日(春节.中秋.国庆等)切换主题,显得更适合当下的气氛; 切换白天或夜晚模式 ...
vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）
VUE项目动态切换皮肤/主题的通用实现方式提供一种通用的的解决方案,无需重启项目,无需更改import的文件路径,直接通过功能按钮热更换皮肤/主题 vue-cli版本:3.0 1. 在pulic目录 ...
Eclispse 换主题、皮肤、配色，换黑色主题护眼
Eclipse写android代码时,默认的文本和框架都是白色,长时间使用,显得过于刺眼.这里介绍三种方法换黑色护眼配色. 1.系统设置里更改 2.从Eclipse Marketplace里下载主题 ...
vue实战-换皮肤2（使用less实现）
在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能.但是这种方法有一个缺陷,那就是只能用css的语法来实现.这个缺陷在某些变态的需求下会增加我们很多工作量,因此本节中将介绍 ...
android 换主题换皮肤（apk包方式）
更换皮肤(主题)的方式有很多种,首先要弄清楚换肤的定义,软件皮肤包括图标.字体.布局.交互风格等,换肤就是换掉皮肤包括的部分或者全部资源.皮肤一般含多个文件,有图片.配置等文件,分散的文件不利于传输和 ...
vue 实现换肤功能
公司项目要实现vue项目换肤功能,要求一套深色,一套浅色,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一.实现思路:切换选中的皮肤状态(light ...

vue实现换主题\皮肤功能

vue实现换主题\皮肤功能相关推荐

最新文章

热门文章