溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue怎么用CSS變量實現切換主題功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
可行性測試
為了檢驗方法的可行性，在public文件夾下新建一個themes文件夾，并在themes文件夾新建一個default.css文件：
:root{
--color:red;
}
在public文件夾的index.html文件中引入外部樣式theme.css，如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<linkrel="icon"href="<%=BASE_URL%>favicon.ico">
<title>vue-skin-peeler-demo</title>
<!--引入themes文件夾下的default.css-->
<linkrel="stylesheet"type="text/css"href="src/themes/default.css"rel="externalnofollow">
</head>
<body>
<noscript>
<strong>We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.</strong>
</noscript>
<divid="app"></div>
<!--builtfileswillbeautoinjected-->
</body>
</html>
然后，在Home.vue中使用CSS變量：
<template>
<div>
<div:class="$style.demo">變紅色</div>
</div>
</template>
<script>
exportdefault{
name:'home'
}
</script>
<stylemodule>
.demo{
color:var(--color);
}
</style>
然后，運行項目并在瀏覽器中打開頁面，頁面顯示效果正常。
注意：@vue/cli使用link標簽引入css樣式可能報錯“We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.”。這是因為@vue/cli將src目錄下的文件都通過webpack打包所引起，所以，靜態文件資源要放在public（如果是@vue/cli2.x版本放在static）文件夾下。
實現主題切換
這里主題切換的思路是替換link標簽的href屬性，因此，需要寫一個替換函數，在src目錄下新建themes.js文件，代碼如下：
//themes.js
constcreateLink=(()=>{
let$link=null
return()=>{
if($link){
return$link
}
$link=document.createElement('link')
$link.rel='stylesheet'
$link.type='text/css'
document.querySelector('head').appendChild($link)
return$link
}
})()
/**
*主題切換函數
*@param{string}theme-主題名稱,默認default
*@return{string}主題名稱
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
returntheme
}
exportdefaulttoggleTheme
然后，在themes文件下創建default.css和dark.css兩個主題文件。創建CSS變量，實現主題化。CSS變量實現主題切換請參考另一篇文章初次接觸css變量
兼容性
IE瀏覽器以及一些舊版瀏覽器不支持CSS變量，因此，需要使用css-vars-ponyfill，是一個ponyfill，可在舊版和現代瀏覽器中為CSS自定義屬性（也稱為“CSS變量”）提供客戶端支持。由于要開啟watch監聽，所以還有安裝MutationObserver.js。
安裝：
npminstallcss-vars-ponyfillmutationobserver-shim--save
然后，在themes.js文件中引入并使用：
//themes.js
import'mutationobserver-shim'
importcssVarsfrom'css-vars-ponyfill'
cssVars({
watch:true
})
constcreateLink=(()=>{
let$link=null
return()=>{
if($link){
return$link
}
$link=document.createElement('link')
$link.rel='stylesheet'
$link.type='text/css'
document.querySelector('head').appendChild($link)
return$link
}
})()
/**
*主題切換函數
*@param{string}theme-主題名稱,默認default
*@return{string}主題名稱
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
returntheme
}
exportdefaulttoggleTheme
開啟watch后，在IE11瀏覽器點擊切換主題開關不起作用。因此，每次切換主題時都重新執行cssVars()，還是無法切換主題，原因是開啟watch后重新執行cssVars()是無效的。最后，只能先關閉watch再重新開啟。成功切換主題的themes.js代碼如下：
//themes.js
import'mutationobserver-shim'
importcssVarsfrom'css-vars-ponyfill'
constcreateLink=(()=>{
let$link=null
return()=>{
if($link){
return$link
}
$link=document.createElement('link')
$link.rel='stylesheet'
$link.type='text/css'
document.querySelector('head').appendChild($link)
return$link
}
})()
/**
*主題切換函數
*@param{string}theme-主題名稱,默認default
*@return{string}主題名稱
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
cssVars({
watch:false
})
setTimeout(function(){
cssVars({
watch:true
})
},0)
returntheme
}
exportdefaulttoggleTheme
“Vue怎么用CSS變量實現切換主題功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
