溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Vue怎么用CSS變量實(shí)現(xiàn)切換主題功能”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
可行性測試
為了檢驗(yàn)方法的可行性，在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>
然后，運(yùn)行項(xiàng)目并在瀏覽器中打開頁面，頁面顯示效果正常。
注意：@vue/cli使用link標(biāo)簽引入css樣式可能報錯“We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.”。這是因?yàn)锧vue/cli將src目錄下的文件都通過webpack打包所引起，所以，靜態(tài)文件資源要放在public（如果是@vue/cli2.x版本放在static）文件夾下。
實(shí)現(xiàn)主題切換
這里主題切換的思路是替換link標(biāo)簽的href屬性，因此，需要寫一個替換函數(shù)，在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
}
})()
/**
*主題切換函數(shù)
*@param{string}theme-主題名稱,默認(rèn)default
*@return{string}主題名稱
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
returntheme
}
exportdefaulttoggleTheme
然后，在themes文件下創(chuàng)建default.css和dark.css兩個主題文件。創(chuàng)建CSS變量，實(shí)現(xiàn)主題化。CSS變量實(shí)現(xiàn)主題切換請參考另一篇文章初次接觸css變量
兼容性
IE瀏覽器以及一些舊版瀏覽器不支持CSS變量，因此，需要使用css-vars-ponyfill，是一個ponyfill，可在舊版和現(xiàn)代瀏覽器中為CSS自定義屬性（也稱為“CSS變量”）提供客戶端支持。由于要開啟watch監(jiān)聽，所以還有安裝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
}
})()
/**
*主題切換函數(shù)
*@param{string}theme-主題名稱,默認(rèn)default
*@return{string}主題名稱
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
returntheme
}
exportdefaulttoggleTheme
開啟watch后，在IE11瀏覽器點(diǎn)擊切換主題開關(guān)不起作用。因此，每次切換主題時都重新執(zhí)行cssVars()，還是無法切換主題，原因是開啟watch后重新執(zhí)行cssVars()是無效的。最后，只能先關(guān)閉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
}
})()
/**
*主題切換函數(shù)
*@param{string}theme-主題名稱,默認(rèn)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變量實(shí)現(xiàn)切換主題功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
