溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue中怎么利用CSS變量實現一個切換主題功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
可行性測試
為了檢驗方法的可行性，在public文件夾下新建一個themes文件夾，并在themes文件夾新建一個default.css文件：
:root { --color: red;}推薦學習：CSS視頻教程
在public文件夾的index.html文件中引入外部樣式theme.css，如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vue-skin-peeler-demo</title> <!-- 引入themes文件夾下的default.css --> <link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow"> </head> <body> <noscript> <strong>We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body></html>
然后，在Home.vue中使用CSS變量：
<template> <div> <div :class="$style.demo">變紅色</div> </div></template><script>export default { name: 'home'}</script><style module> .demo { color: var(--color); }</style>然后，運行項目并在瀏覽器中打開頁面，頁面顯示效果正常。
注意：@vue/cli使用link標簽引入css樣式可能報錯“We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.”。這是因為@vue/cli將src目錄下的文件都通過webpack打包所引起，所以，靜態文件資源要放在public（如果是@vue/cli 2.x版本放在static）文件夾下。
實現主題切換
這里主題切換的思路是替換link標簽的href屬性，因此，需要寫一個替換函數，在src目錄下新建themes.js文件，代碼如下：
// themes.jsconst createLink = (() => { 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} 主題名稱 */const toggleTheme = (theme = 'default') => { const $link = createLink() $link.href = `./themes/${theme}.css` return theme}export default toggleTheme然后，在themes文件下創建default.css和dark.css兩個主題文件。創建CSS變量，實現主題化。CSS變量實現主題切換請參考另一篇文章初次接觸css變量
兼容性
IE瀏覽器以及一些舊版瀏覽器不支持CSS變量，因此，需要使用css-vars-ponyfill，是一個ponyfill，可在舊版和現代瀏覽器中為CSS自定義屬性（也稱為“ CSS變量”）提供客戶端支持。由于要開啟watch監聽，所以還有安裝MutationObserver.js。
安裝：
npm install css-vars-ponyfill mutationobserver-shim --save
然后，在themes.js文件中引入并使用：
// themes.jsimport 'mutationobserver-shim'import cssVars from 'css-vars-ponyfill'cssVars({ watch: true})const createLink = (() => { 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} 主題名稱 */const toggleTheme = (theme = 'default') => { const $link = createLink() $link.href = `./themes/${theme}.css` return theme}export default toggleTheme開啟watch后，在IE 11瀏覽器點擊切換主題開關不起作用。因此，每次切換主題時都重新執行cssVars()，還是無法切換主題，原因是開啟watch后重新執行cssVars()是無效的。最后，只能先關閉watch再重新開啟。成功切換主題的themes.js代碼如下：
// themes.jsimport 'mutationobserver-shim'import cssVars from 'css-vars-ponyfill'const createLink = (() => { 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} 主題名稱 */const toggleTheme = (theme = 'default') => { const $link = createLink() $link.href = `./themes/${theme}.css` cssVars({ watch: false }) setTimeout(function () { cssVars({ watch: true }) }, 0) return theme}export default toggleTheme關于Vue中怎么利用CSS變量實現一個切換主題功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
