溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue中怎么利用CSS變量實現(xiàn)一個切換主題功能

發(fā)布時間：2021-07-09 11:19:29 來源：億速云 閱讀：324 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)Vue中怎么利用CSS變量實現(xiàn)一個切換主題功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

可行性測試

為了檢驗方法的可行性，在public文件夾下新建一個themes文件夾，并在themes文件夾新建一個default.css文件：

:root {  --color: red;}

推薦學(xué)習(xí)：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標(biāo)簽引入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打包所引起，所以，靜態(tài)文件資源要放在public（如果是@vue/cli 2.x版本放在static）文件夾下。

實現(xiàn)主題切換

這里主題切換的思路是替換link標(biāo)簽的href屬性，因此，需要寫一個替換函數(shù)，在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  }})()/** * 主題切換函數(shù) * @param {string} theme - 主題名稱, 默認(rèn)default * @return {string} 主題名稱 */const toggleTheme = (theme = 'default') => {  const $link = createLink()  $link.href = `./themes/${theme}.css`  return theme}export default toggleTheme

然后，在themes文件下創(chuàng)建default.css和dark.css兩個主題文件。創(chuàng)建CSS變量，實現(xiàn)主題化。CSS變量實現(xiàn)主題切換請參考另一篇文章初次接觸css變量

兼容性

IE瀏覽器以及一些舊版瀏覽器不支持CSS變量，因此，需要使用css-vars-ponyfill，是一個ponyfill，可在舊版和現(xiàn)代瀏覽器中為CSS自定義屬性（也稱為“ CSS變量”）提供客戶端支持。由于要開啟watch監(jiān)聽，所以還有安裝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  }})()/** * 主題切換函數(shù) * @param {string} theme - 主題名稱, 默認(rèn)default * @return {string} 主題名稱 */const toggleTheme = (theme = 'default') => {  const $link = createLink()  $link.href = `./themes/${theme}.css`  return theme}export default toggleTheme

開啟watch后，在IE 11瀏覽器點擊切換主題開關(guān)不起作用。因此，每次切換主題時都重新執(zhí)行cssVars()，還是無法切換主題，原因是開啟watch后重新執(zhí)行cssVars()是無效的。最后，只能先關(guān)閉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  }})()/** * 主題切換函數(shù) * @param {string} theme - 主題名稱, 默認(rèn)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

關(guān)于Vue中怎么利用CSS變量實現(xiàn)一個切換主題功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手