vue實(shí)現(xiàn)換膚功能

更新時(shí)間：2022年07月01日 15:47:35 作者：不想寫代碼的程序員

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能，一套深色，一套淺色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

公司項(xiàng)目要實(shí)現(xiàn)vue項(xiàng)目換膚功能，要求，考慮到最節(jié)省時(shí)間的就是寫兩套css，一套light.css，一套dark.css，然后切換css

一、實(shí)現(xiàn)思路

切換選中的皮膚狀態(tài)（light，或者dark）存儲(chǔ)在sessionStorage中，監(jiān)聽sessionStorage數(shù)據(jù)變化，切換index.html中引入的css文件

二、實(shí)現(xiàn)過程

1、在main.vue添加：

?<p style="display: inline-block;"> 切換主題：</p>
? <RadioGroup v-model="theme" @on-change="changeTheme">
? ? ? ? <Radio label="light"></Radio>
? ? ? ? <Radio label="dark"></Radio>
? ? </RadioGroup>
? ??
?//methods:
? ?changeTheme(){
?//localStorage.setItem('themeColor',this.theme);?
?this.resetSetItem('themeColor', this.theme);
? ?},

2、main.js添加：（參考網(wǎng)上）

Vue.prototype.resetSetItem = function (key, newVal) {
? if (key === 'themeColor') {

? ? ? // 創(chuàng)建一個(gè)StorageEvent事件
? ? ? var newStorageEvent = document.createEvent('StorageEvent');
? ? ? const storage = {
? ? ? ? ? setItem: function (k, val) {
? ? ? ? ? ? ? sessionStorage.setItem(k, val);

? ? ? ? ? ? ? // 初始化創(chuàng)建的事件
? ? ? ? ? ? ? newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

? ? ? ? ? ? ? // 派發(fā)對象
? ? ? ? ? ? ? window.dispatchEvent(newStorageEvent)
? ? ? ? ? }
? ? ? }
? ? ? return storage.setItem(key, newVal);
? }
}

3.index.html 添加

<!DOCTYPE html>
<html>

<head>
? <meta charset="utf-8">
? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? //添加默認(rèn)css
? <link rel="stylesheet" href="./static/css/dark.css">
? <title>xxx</title>
</head>

<body>
? <div id="app"></div>
</body>

</html>

<script>
//在js添加默認(rèn)引入的dark.css,如果不引入，ivew自帶的樣式會(huì)覆蓋在html中引入的dark.css,所以需要在js重新引入，用來覆蓋ivew的默認(rèn)樣式
? var link = document.createElement("link");
? link.rel = "stylesheet";
? link.type = "text/css";
? link.href = "./static/css/dark.css";
? var head = document.getElementsByTagName("head")[0];
? head.appendChild(link);
? //監(jiān)聽sessionStorage切換主題
? window.addEventListener('setItem', () => {
? ? var themeColor = sessionStorage.getItem('themeColor');
? ? let url = "./static/css/" + themeColor + ".css"
? ? changeStyles(url);
? })

? function changeStyles(url) {
? ? var links = document.getElementsByTagName("link")
? ? console.log(links)
? ? //替換之前引入的css
? ? if (links.length != 0) {
? ? ? for (var i = 0; i < links.length; i++) {
? ? ? ? // links[i].parentNode.removeChild(links[i]);
? ? ? ? links[i].href = url
? ? ? }
? ? }
? ? var links = document.getElementsByTagName("link")
? ? //console.log(links)

? }

</script>

4、效果

三、總結(jié)

1、在實(shí)現(xiàn)的過程中，發(fā)現(xiàn)localStorage數(shù)據(jù)監(jiān)聽不到，在網(wǎng)上的看到數(shù)據(jù)存儲(chǔ)在sessionStorage中
2、css執(zhí)行順序需要注意：頁面先渲染index.html中head標(biāo)簽引入的dark.css，main.js引入的iview.css后渲染，因此會(huì)覆蓋head標(biāo)簽引入的dark.css，所以需要在js標(biāo)簽中重新引入一遍。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: