本篇內(nèi)容介紹了“Vue怎么用CSS變量實(shí)現(xiàn)切換主題功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
黃平ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！
可行性測(cè)試
為了檢驗(yàn)方法的可行性，在public文件夾下新建一個(gè)themes文件夾，并在themes文件夾新建一個(gè)default.css文件：
:root{
--color:red;
}
在public文件夾的index.html文件中引入外部樣式theme.css，如下：
We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.
然后，在Home.vue中使用CSS變量：
.demo{
color:var(--color);
}
然后，運(yùn)行項(xiàng)目并在瀏覽器中打開(kāi)頁(yè)面，頁(yè)面顯示效果正常。
注意：@vue/cli使用link標(biāo)簽引入css樣式可能報(bào)錯(cuò)“We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.”。這是因?yàn)锧vue/cli將src目錄下的文件都通過(guò)webpack打包所引起，所以，靜態(tài)文件資源要放在public（如果是@vue/cli2.x版本放在static）文件夾下。
實(shí)現(xiàn)主題切換
這里主題切換的思路是替換link標(biāo)簽的href屬性，因此，需要寫(xiě)一個(gè)替換函數(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-主題名稱(chēng),默認(rèn)default
*@return{string}主題名稱(chēng)
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
returntheme
}
exportdefaulttoggleTheme
然后，在themes文件下創(chuàng)建default.css和dark.css兩個(gè)主題文件。創(chuàng)建CSS變量，實(shí)現(xiàn)主題化。CSS變量實(shí)現(xiàn)主題切換請(qǐng)參考另一篇文章初次接觸css變量
兼容性
IE瀏覽器以及一些舊版瀏覽器不支持CSS變量，因此，需要使用css-vars-ponyfill，是一個(gè)ponyfill，可在舊版和現(xiàn)代瀏覽器中為CSS自定義屬性（也稱(chēng)為“CSS變量”）提供客戶端支持。由于要開(kāi)啟watch監(jiān)聽(tīng)，所以還有安裝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-主題名稱(chēng),默認(rèn)default
*@return{string}主題名稱(chēng)
*/
consttoggleTheme=(theme='default')=>{
const$link=createLink()
$link.href=`./themes/${theme}.css`
returntheme
}
exportdefaulttoggleTheme
開(kāi)啟watch后，在IE11瀏覽器點(diǎn)擊切換主題開(kāi)關(guān)不起作用。因此，每次切換主題時(shí)都重新執(zhí)行cssVars()，還是無(wú)法切換主題，原因是開(kāi)啟watch后重新執(zhí)行cssVars()是無(wú)效的。最后，只能先關(guān)閉watch再重新開(kāi)啟。成功切換主題的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-主題名稱(chēng),默認(rèn)default
*@return{string}主題名稱(chēng)
*/
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)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
