VueはCSS変数を使用してテーマ切り替え機能を実装します-CSSチュートリアル-php.cn

VueはCSS変数を使用してテーマ切り替え機能を実装します

angryTom

リリース： 2019-11-29 16:47:05

転載

3662 人が閲覧しました

テーマ管理は Web サイトでよく見られますが、一般的な考え方は、テーマに関連する CSS スタイルを分離し、ユーザーがテーマを選択したときに対応する CSS スタイルファイルを読み込むことです。ほとんどのブラウザは CSS 変数と互換性があり、テーマスタイルの管理が容易になりました。最近、CSS 変数を使用して Vue プロジェクトでテーマを設定する練習をしました。プロセス全体を見てみましょう。

VueはCSS変数を使用してテーマ切り替え機能を実装します

Github プロジェクトアドレス https://github.com/JofunLiang/vue-project-themable-demo

デモアドレス https://jofunliang.github .io/vue-project-themable-demo/

実現可能性テスト

メソッドの実現可能性をテストするには、パブリックフォルダーの下に新しいテーマフォルダーを作成します。そして、themes フォルダーに新しい default.css ファイルを作成します:

:root {
  --color: red;
}

ログイン後にコピー

推奨学習: CSS ビデオチュートリアル

in 次のように、外部スタイル theme.css をパブリックフォルダーの Index.html ファイルに導入します:

<!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&#39;re sorry but vue-skin-peeler-demo doesn&#39;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: &#39;home&#39;
}
</script>
<style module>
  .demo {
    color: var(--color);
  }
</style>

ログイン後にコピー

次に、プロジェクトを実行してブラウザでページを開くと、ページは通常どおり表示されます。

注: CSS スタイルを導入するために link タグを使用する @vue/cli は、「申し訳ありませんが、JavaScript が有効になっていないと vue-skin-peeler-demo は適切に動作しません。お願いします」というエラーを報告する場合があります。続行できるようにします。」これは、@vue/cli が webpack を介して src ディレクトリ内のすべてのファイルをパッケージ化することが原因で発生するため、静的ファイルリソースは public (@vue/cli 2.x バージョンが静的ディレクトリに配置されている場合) フォルダーに配置する必要があります。

テーマ切り替えの実装

ここでのテーマ切り替えのアイデアは、リンクタグの href 属性を置き換えることです。 src に置換関数を記述する必要があります。ディレクトリに新しい themes.js ファイルを作成します。コードは次のとおりです。

// themes.js
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}
export default toggleTheme

ログイン後にコピー

次に、default.css## を作成します。テーマファイルの下の # と dark.css 2 つのテーマファイル。テーマを実装するための CSS 変数を作成します。 CSS 変数を使用したテーマの切り替えを実装するには、別の記事を参照してください。CSS 変数を使用する最初の問い合わせ

互換性

IE ブラウザと一部の古いブラウザは CSS 変数をサポートしていません。したがって、古いブラウザと最新のブラウザの両方で CSS カスタムプロパティ (「CSS 変数」とも呼ばれます) のクライアント側サポートを提供する ponyfill である css-vars-ponyfill が必要です。監視監視を有効にする必要があるため、MutationObserver.js もインストールする必要があります。

インストール:

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

ログイン後にコピー

次に、これを Themes.js ファイルに導入して使用します:

// themes.js
import &#39;mutationobserver-shim&#39;
import cssVars from &#39;css-vars-ponyfill&#39;
cssVars({
  watch: true
})
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}
export default toggleTheme

ログイン後にコピー

監視をオンにした後、IE 11 をクリックします。ブラウザのテーマの切り替えが機能しません。そのため、テーマを切り替えるたびに cssVars() を再実行しても、テーマを切り替えることはできず、ウォッチを ON にした後の cssVars() の再実行は無効となるためです。最後に、唯一のオプションは、時計の電源をオフにしてから再度オンにすることです。テーマを正常に切り替えるための Strategies.js コードは次のとおりです:

// themes.js
import &#39;mutationobserver-shim&#39;
import cssVars from &#39;css-vars-ponyfill&#39;
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  cssVars({
    watch: false
  })
  setTimeout(function () {
    cssVars({
      watch: true
    })
  }, 0)
  return theme
}
export default toggleTheme

ログイン後にコピー

すべてのコードを表示するには、Github プロジェクトアドレスにアクセスしてください。

テーマを記憶する

テーマを記憶する機能を実装するには、1 つはテーマをサーバーに保存する方法、もう 1 つはローカルストレージテーマを使用する方法です。。便宜上、ここではテーマのローカルストレージメソッドが主に使用されます。つまり、テーマの保存には localStorage が使用されます。具体的な実装については、Github プロジェクトのアドレスをご覧ください。

この記事は、PHP 中国語 Web サイトの

CSS チュートリアル列から引用したものです。学習へようこそ

以上がVueはCSS変数を使用してテーマ切り替え機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。