Hello大家好，本章我們新增修改系統主題樣式功能 。有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝
現在很多修改主題功能都利用less來做，那麼除了less，jquery等我們還有沒有其他方法來修改主題樣式了呢？本章我們利用css3中動態樣式來修改。
一：css3變數介紹
CSS 中的 “var()” 和 “:root”
var()
var() 函式可以代替元素中任何屬性中的值的任何部分。var() 函式不能作為屬性名、選擇器或者其他除了屬性值之外的值。（這樣做通常會產生無效的語法或者一個沒有關聯到變數的值。）
:root
:root 是一個偽類，表示文件根元素，非 IE 及 ie8 及以上瀏覽器都支援，在: root 中宣告相當於全域性屬性，只要當前頁面引用了: root segment 所在檔案，都可以使用 var() 來引用
測試:
修改static→css→common.css 新增如下
:root {
/*頭部背景顏色 父級選單顏色*/
--headerColor: #202d3d;
/*子集選單顏色*/
--sonMenuColor: #2C3E50;
/*子集選單選中顏色*/
--openSonMenuColor: #21598f;
/*子選單選中字型顏色*/
--openSonFontColor: #fff;
/*字型顏色*/
--fontColor: #fff;
/*整體背景顏色 or 圖片*/
--backgroundStyle: #2C3E50;
/*view背景顏色*/
--viewBackgroundStyle: rgba(255, 255, 255, 1);
/*選中子選單自字型顏色*/
--openSonFontColor: #fff;
/*選單懸浮時*/
--userBackgroundStyle: #2C3E50;
--userFontColor: #fff;
}複製程式碼修改Home.vue中style如下
<style>
a {
color: var(--fontColor);
}
.header-div {
background-color: var(--headerColor);
color: var(--fontColor);
height: 70px;
align-items: center;
box-shadow: 3px 0 3px rgba(0, 0, 0, .3);
padding-left: 10px;
margin-bottom: 20px;
}
.header-div-left {
align-items: center;
}
.header-div-left:hover {
cursor: pointer;
}
.header-div-right {
align-items: center;
width: calc(100% - 120px);
justify-content: flex-end;
}
.header-div-right :hover {
cursor: pointer;
}
.menu-list-div {
width: 12%;
max-width: 190px;
height: calc(100% - 30px);
background-color: var(--sonMenuColor);
font-size: 16px;
border-radius: 5px;
padding: 5px;
overflow-y: auto;
}
.menu-list-bgc {
background-color: var(--sonMenuColor);
color: var(--fontColor);
align-items: center;
padding: 15px;
cursor: pointer;
}
.menuSon-list-bgc {
margin-top: 5px;
background-color: var(--headerColor);
padding: 10px 15px 10px 30px;
border-radius: 5px;
}
.menuSon-list-color {
background-color: var(--openSonMenuColor);
color: var(--openSonFontColor);
border-left: 4px solid;
cursor: pointer;
}
.menuSon-list-color1 {
color: var(--fontColor);
padding: 10px 15px 10px 34px;
cursor: pointer;
}
.setting-div {
position: fixed;
color: var(--fontColor);
right: 20px;
top: 50px;
width: 125px;
height: 80px;
background-color: var(--sonMenuColor);
z-index: 4;
font-size: 14px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.setting-div :hover {
cursor: pointer;
}
.settingOption-div {
padding: 10px 2px;
align-items: center;
justify-content: center;
}
.settingOption-div-img {
width: 15px;
}
.settingOption-div-title {
margin-left: 10px;
}
.routerView {
width: 100%;
background: var(--viewBackgroundStyle);
border-radius: 5px;
height: calc(100% - 20px);
border: 0;
}
</style>複製程式碼效果如下，之前設定的樣式依舊有效，那麼我們就可以根據這個特點來進行修改樣式
二：建立主題配置檔案
建立src→const→theme.js
export const THEME = {
STYLE: [{
// 主題名字
'themeName':'預設主題',
/*頭部背景顏色 父級選單顏色*/
'--headerColor':'#2C3E50',
/*子集選單顏色*/
'--sonMenuColor':'#2C3E50',
/*子集選單選中顏色*/
'--openSonMenuColor':'#21598f',
/*字型顏色*/
'--fontColor':'#fff',
/*整體背景顏色 or 圖片*/
'--backgroundStyle':'#283542',
/*view背景顏色*/
'--viewBackgroundStyle':'rgba(255, 255, 255, 1)',
// 選中子選單自字型顏色
'--openSonFontColor':'#fff',
// 選單懸浮時
'--userBackgroundStyle':'#2C3E50',
'--userFontColor':'#fff'
},{
'themeName':'炫酷主題',
'--backgroundStyle':'url("https://i4.piimg.com/510372/2bdbeadd3d33f01f.png")',
'--headerColor':'rgba(255, 255, 255, 0)',
'--sonMenuColor':'rgba(255, 255, 255, 0)',
'--openSonMenuColor':'rgba(255, 255, 255, 0)',
'--fontColor':'#fff',
'--viewBackgroundStyle':'rgba(255, 255, 255, 0.8)',
'--openSonFontColor':'#fff',
// 選單懸浮時
'--userBackgroundStyle':'rgba(0,0,0,.5)',
'--userFontColor':'#fff'
},{
'themeName':'書香年華',
'--backgroundStyle':'url("http://pic.netbian.com/uploads/allimg/170630/160943-14988101838dc4.jpg")',
'--headerColor':'rgba(255, 255, 255, 0)',
'--sonMenuColor':'rgba(255, 255, 255, 0)',
'--openSonMenuColor':'rgba(255, 255, 255, 0)',
'--fontColor':'#fff',
'--viewBackgroundStyle':'rgba(255, 255, 255, 0.8)',
'--openSonFontColor':'#fff',
// 選單懸浮時
'--userBackgroundStyle':'rgba(0,0,0,.5)',
'--userFontColor':'#fff'
},{
'themeName':'漸變主題',
'--backgroundStyle':'linear-gradient(120deg,#bc00e3,#4efffb)',
'--headerColor':'rgba(255, 255, 255, 0)',
'--sonMenuColor':'rgba(255, 255, 255, 0)',
'--openSonMenuColor':'rgba(255, 255, 255, 0)',
'--fontColor':'#fff',
'--viewBackgroundStyle':'rgba(255, 255, 255, 0.8)',
'--openSonFontColor':'#fff',
// 選單懸浮時
'--userBackgroundStyle':'rgba(188, 0, 227, 0.4)',
'--userFontColor':'#fff'
},{
'themeName':'黑色主題',
'--backgroundStyle':'#002253',
'--headerColor':'rgba(255, 255, 255, 0)',
'--sonMenuColor':'rgba(255, 255, 255, 0)',
'--openSonMenuColor':'hsla(0,0%,100%,.05)',
'--fontColor':'#ff929a',
'--viewBackgroundStyle':'#fff',
'--openSonFontColor':'#ffb870',
// 選單懸浮時
'--userBackgroundStyle':'rgba(255, 255, 255, 0)',
'--userFontColor':'#ff929a'
},{
'themeName':'白色主題',
'--backgroundStyle':'#eceef3',
'--headerColor':'#fff',
'--sonMenuColor':'#fff',
'--openSonMenuColor':'#e2edff',
'--fontColor':'rgb(102, 102, 102)',
'--viewBackgroundStyle':'#fff',
'--openSonFontColor':'#00AFF9',
// 選單懸浮時
'--userBackgroundStyle':'#e2edff',
'--userFontColor':'#00AFF9'
}],
};
//修改樣式
export const setThemeStyle = function(index) {
var themeStyleObj = THEME.STYLE[index];
for (var Key in themeStyleObj){
if(Key!= 'themeName'){
//根據變數名 修改變數的值，以達到更換主題的目的
document.documentElement.style.setProperty(Key, themeStyleObj[Key]);
}
}
} 複製程式碼大家也可以根據自己需求來配置不同主題。
三：新增工具類
建立src→utils→storage.js
//LocalStorage儲存
export const setJsonLocalStorageItem = function(key, value) {
localStorage.removeItem(key);
var json = JSON.stringify(value);
localStorage.setItem(key, json);
}
export const getJsonLocalStorageItem = function(key) {
return JSON.parse(localStorage.getItem(key));
}
export const setStrLocalStorageItem = function(key, value) {
localStorage.removeItem(key)
localStorage.setItem(key, value)
}
export const getStrLocalStorageItem = function(key) {
return localStorage.getItem(key)
}
export const removeLocalStorageItem = function(key) {
localStorage.removeItem(key);
}
export const cleanLocalStorage = function() {
localStorage.clear();
}
//SessionStorage 儲存
export const setJsonSessionStorageItem = function(key, value) {
sessionStorage.removeItem(key);
var json = JSON.stringify(value);
sessionStorage.setItem(key, json);
}
export const getJsonSessionStorageItem = function(key) {
return JSON.parse(sessionStorage.getItem(key));
}
export const setStrSessionStorageItem = function(key, value) {
sessionStorage.removeItem(key)
sessionStorage.setItem(key, value)
}
export const getStrSessionStorageItem = function(key) {
return sessionStorage.getItem(key)
}
export const removeSessionStorageItem = function(key) {
sessionStorage.removeItem(key);
}
export const cleanSessionStorage = function() {
sessionStorage.clear();
} 複製程式碼四：修改Home.vue
<template>
<div style="height: 100%;background: var(--backgroundStyle);background-size: 100%">
<div class="header-div disFlex">
<el-tooltip class="item" effect="light" content="返回首頁" placement="right">
<div class="header-div-left disFlex" @click="gohome()">
<span style="margin-left: 10px;font-weight: bold;font-size: 20px">MyVue</span>
</div>
</el-tooltip>
<div class="disFlex header-div-right">
<div @click="isUpdateTheme = true" style="font-size: 20px">
<i class="el-icon-menu"></i>
</div>
<div @click="showLoginOut = !showLoginOut" style="padding: 0px 10px;">
<img src="../images/userHeaderImg.png" style="width: 25px;"/>
</div>
<div @click="showLoginOut = !showLoginOut">
<span>{{userName}}</span>
</div>
</div>
</div>
<div class="disFlex" style="height: calc(100% - 90px);padding:0 15px;">
<div class="menu-list-div">
<div v-for="(menu,index) in menuList" :key="menu.id">
<div @click="showMenu(index)" class="menu-list-bgc disFlex">
<div style="width: 80%;">
<span>{{menu.menuName}}</span>
</div>
<div style="width: 20%;text-align: right;">
<i class="el-icon-arrow-right"
:class="[menu.isOpen == 1?'rotate':'rotate1']"
v-if="menu.adminMenuList.length > 0"></i>
</div>
</div>
<el-collapse-transition>
<div v-show="menu.isOpen==1">
<a>
<router-link tag="li" :to="menuSon.query == undefined? menuSon.path : menuSon.path + menuSon.query"
v-for="(menuSon,index1) in menu.adminMenuList"
:key="menuSon.id">
<div class="menuSon-list-bgc"
@click="showMenuSon(index,index1)"
:class="[menuSon.isOpen==1?'menuSon-list-color':'menuSon-list-color1']">
<span>{{menuSon.menuName}}</span>
</div>
</router-link>
</a>
</div>
</el-collapse-transition>
</div>
</div>
<div style="width: 100%;margin-left: 20px;">
<router-view class="routerView" :key="$route.fullPath"></router-view>
</div>
</div>
<!--更換主題-->
<el-dialog title="更換主題" :visible.sync="isUpdateTheme">
<el-radio-group v-model="themeIndex" @change = "updateTheme">
<el-radio :label="index" v-for="(theme,index) in themeList" :key = "index">{{theme.themeName}}</el-radio>
</el-radio-group>
</el-dialog>
</div>
</template>
<script>
import * as theme from '../const/theme';
//引入storage
import * as storage from "./../utils/storage";
export default {
data() {
return {
menuList: [],
userName: '',
themeIndex: 0,//預設主題
isUpdateTheme:false,
themeList:[],
}
},
created: function () {
this.getMenuList();
this.userName = "MyVue";
this.themeList = theme.THEME.STYLE;
this.setTheme(); //頁面載入時載入主題
},
methods: {
getMenuList(){
this.menuList = [
{
menuName: "外部連結", isOpen: 0,
adminMenuList: [
{menuName: "百度", isOpen: 0, path: "/Iframe", query:"/https%3A%2F%2Fwww.baidu.com"},
{menuName: "Element UI", isOpen: 0, path: "/Iframe", query:"/http%3A%2F%2Felement-cn.eleme.io/#/zh-CN"}
]
},
{
menuName: "使用者管理", isOpen: 0,
adminMenuList: [
{menuName: "檢視使用者", isOpen: 0, path: "/user"}
]
}
];
},
setTheme() {
let storageThemeIndex = storage.getStrLocalStorageItem("storageThemeIndex");
if (!storageThemeIndex) {
storage.setStrLocalStorageItem("storageThemeIndex", 0);
}
storageThemeIndex = storage.getStrLocalStorageItem("storageThemeIndex");
this.themeIndex = parseInt(storageThemeIndex);
this.updateTheme(storageThemeIndex);
},
updateTheme(index){
theme.setThemeStyle(index);
storage.setStrLocalStorageItem("storageThemeIndex", index);
},
showMenu(index) {
this.menuList.forEach(function (item, i) {
if (i === index) {
return;
}
item.isOpen = 0;
})
this.menuList[index].isOpen = this.menuList[index].isOpen === 1 ? 0 : 1;
var menu = this.menuList[index];
menu.adminMenuList.forEach(function (item, i) {
menu.adminMenuList[i].isOpen = 0;
})
},
showMenuSon(index, index1) {
var menu = this.menuList[index];
menu.adminMenuList.forEach(function (item, i) {
if (i != index1) {
menu.adminMenuList[i].isOpen = 0;
} else {
menu.adminMenuList[i].isOpen = 1;
}
})
},
closeMenu() {
this.menuList.forEach(function (item) {
this.isOpen = 0;
})
},
gohome() {
this.$router.push({
path: "/home"
});
this.closeMenu();
},
}
}
</script>
<style>
a {
color: var(--fontColor);
}
.header-div {
background-color: var(--headerColor);
color: var(--fontColor);
height: 70px;
align-items: center;
box-shadow: 3px 0 3px rgba(0, 0, 0, .3);
padding-left: 10px;
margin-bottom: 20px;
}
.header-div-left {
align-items: center;
}
.header-div-left:hover {
cursor: pointer;
}
.header-div-right {
align-items: center;
width: calc(100% - 120px);
justify-content: flex-end;
}
.header-div-right :hover {
cursor: pointer;
}
.menu-list-div {
width: 12%;
max-width: 190px;
height: calc(100% - 30px);
background-color: var(--sonMenuColor);
font-size: 16px;
border-radius: 5px;
padding: 5px;
overflow-y: auto;
}
.menu-list-bgc {
background-color: var(--sonMenuColor);
color: var(--fontColor);
align-items: center;
padding: 15px;
cursor: pointer;
}
.menuSon-list-bgc {
margin-top: 5px;
background-color: var(--headerColor);
padding: 10px 15px 10px 30px;
border-radius: 5px;
}
.menuSon-list-color {
background-color: var(--openSonMenuColor);
color: var(--openSonFontColor);
border-left: 4px solid;
cursor: pointer;
}
.menuSon-list-color1 {
color: var(--fontColor);
padding: 10px 15px 10px 34px;
cursor: pointer;
}
.routerView {
width: 100%;
background: var(--viewBackgroundStyle);
border-radius: 5px;
height: calc(100% - 20px);
border: 0;
}
</style> 複製程式碼五：執行測試
執行npm run dev
專案地址
寫文章不易，如對您有幫助，請幫忙點下star
結尾
新增修改系統主題樣式功能已完成，後續功能接下來陸續更新，有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝大家。