Vue怎樣用CSS變量制作切換主題效果

發(fā)布時(shí)間：2020-06-22 09:08:56 來源：億速云閱讀：276 作者：Leah 欄目：web開發(fā)

Vue怎樣用CSS變量制作切換主題效果？這篇文章運(yùn)用了實(shí)例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

Vue怎樣用CSS變量制作切換主題效果

Github項(xiàng)目地址 https://github.com/JofunLiang/vue-project-themable-demo

演示地址 https://jofunliang.github.io/vue-project-themable-demo/

可行性測(cè)試

為了檢驗(yàn)方法的可行性，在public文件夾下新建一個(gè)themes文件夾，并在themes文件夾新建一個(gè)default.css文件：

:root {
  --color: red;
}

在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>

然后，運(yùn)行項(xiàng)目并在瀏覽器中打開頁面，頁面顯示效果正常。

注意：@vue/cli使用link標(biāo)簽引入css樣式可能報(bào)錯(cuò)“We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.”。這是因?yàn)锧vue/cli將src目錄下的文件都通過webpack打包所引起，所以，靜態(tài)文件資源要放在public（如果是@vue/cli 2.x版本放在static）文件夾下。

實(shí)現(xiàn)主題切換

這里主題切換的思路是替換link標(biāo)簽的href屬性，因此，需要寫一個(gè)替換函數(shù)，在src目錄下新建themes.js文件，代碼如下：

// themes.js
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

然后，在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自定義屬性（也稱為“ CSS變量”）提供客戶端支持。由于要開啟watch監(jiān)聽，所以還有安裝MutationObserver.js。

安裝：

npm install css-vars-ponyfill mutationobserver-shim --save

然后，在themes.js文件中引入并使用：

// themes.js
import '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瀏覽器點(diǎn)擊切換主題開關(guān)不起作用。因此，每次切換主題時(shí)都重新執(zhí)行cssVars()，還是無法切換主題，原因是開啟watch后重新執(zhí)行cssVars()是無效的。最后，只能先關(guān)閉watch再重新開啟。成功切換主題的themes.js代碼如下：

// themes.js
import '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

查看所有代碼，請(qǐng)移步Github項(xiàng)目地址。

記住主題

實(shí)現(xiàn)記住主題這個(gè)功能，一是可以向服務(wù)器保存主題，一是使用本地存儲(chǔ)主題。為了方便，這里主要使用本地存儲(chǔ)主題的方式，即使用localStorage存儲(chǔ)主題。具體實(shí)現(xiàn)請(qǐng)移步Github項(xiàng)目地址。

上文描述的就是Vue用CSS變量制作切換主題效果的方法，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

Vue怎樣用CSS變量制作切換主題效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽