Vue verwendet CSS-Variablen, um die Theme-Switching-Funktion zu implementieren-CSS-Tutorial-php.cn

Vue verwendet CSS-Variablen, um die Theme-Switching-Funktion zu implementieren

angryTom

Freigeben： 2019-11-29 16:47:05

nach vorne

3677 Leute haben es durchsucht

Die Themenverwaltung ist häufig auf Websites zu sehen. Die allgemeine Idee besteht darin, die themenbezogenen CSS-Stile zu trennen und die entsprechenden CSS-Stildateien zu laden, wenn der Benutzer das Thema auswählt. Die meisten Browser sind mittlerweile gut mit CSS-Variablen kompatibel und thematische Stile sind einfacher zu verwalten. Kürzlich habe ich CSS-Variablen verwendet, um eine Theming-Übung im Vue-Projekt durchzuführen. Schauen wir uns den gesamten Prozess an.

Vue verwendet CSS-Variablen, um die Theme-Switching-Funktion zu implementieren

Github-Projektadresse https://github.com/JofunLiang/vue-project-themable-demo

Demoadresse https://jofunliang.github .io/vue-project-themable-demo/

Machbarkeitstest

Um die Machbarkeit der Methode zu testen, erstellen Sie einen neuen Themenordner unter dem öffentlichen Ordner . Und erstellen Sie eine neue default.css-Datei im Ordner themes:

:root {
  --color: red;
}

Nach dem Login kopieren

Empfohlenes Lernen: CSS-Video-Tutorial

in Führen Sie den externen Stil theme.css wie folgt in die Datei index.html des öffentlichen Ordners ein:

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

Nach dem Login kopieren

Verwenden Sie dann die CSS-Variable in Home.vue:

<template>
  <div>
    <div :class="$style.demo">变红色</div>
  </div>
</template>
<script>
export default {
  name: &#39;home&#39;
}
</script>
<style module>
  .demo {
    color: var(--color);
  }
</style>

Nach dem Login kopieren

Führen Sie dann das Projekt aus und öffnen Sie die Seite im Browser. Die Seite wird normal angezeigt.

Hinweis: @vue/cli meldet bei Verwendung des Link-Tags zur Einführung von CSS-Stilen möglicherweise einen Fehler: „Es tut uns leid, aber vue-skin-peeler-demo funktioniert nicht ordnungsgemäß, wenn JavaScript nicht aktiviert ist. Bitte Aktivieren Sie es, um fortzufahren. Dies wird dadurch verursacht, dass @vue/cli alle Dateien im src-Verzeichnis über Webpack packt. Daher müssen statische Dateiressourcen im öffentlichen Ordner abgelegt werden (wenn die Version @vue/cli 2.x im statischen Ordner abgelegt wird).

Themenwechsel implementieren

Die Idee des Themenwechsels besteht darin, das href-Attribut des Link-Tags zu ersetzen um eine Ersetzungsfunktion in src zu schreiben. Erstellen Sie eine neue themes.js-Datei im Verzeichnis mit dem folgenden Code:

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

Nach dem Login kopieren

Erstellen Sie dann default.css und dark.css unter der Themendatei Zwei Themendateien. Erstellen Sie CSS-Variablen, um Theming zu implementieren. Informationen zum Implementieren des Theme-Wechsels mit CSS-Variablen finden Sie in einem anderen Artikel. Erster Kontakt mit CSS-Variablen

Kompatibilität

IE-Browser und einige ältere Browser unterstützen keine CSS-Variablen. Daher ist css-vars-ponyfill erforderlich, ein Ponyfill, das clientseitige Unterstützung für benutzerdefinierte CSS-Eigenschaften (auch als „CSS-Variablen“ bezeichnet) sowohl in älteren als auch in modernen Browsern bietet. Da Sie die Überwachungsüberwachung aktivieren müssen, müssen Sie auch MutationObserver.js installieren.

Installation:

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

Nach dem Login kopieren

Führen Sie es dann in der Datei „themes.js“ ein und verwenden Sie es:

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

Nach dem Login kopieren

Klicken Sie nach dem Einschalten der Uhr auf IE 11 Browser Das Umschalten des Theme-Schalters funktioniert nicht. Wenn Sie also jedes Mal, wenn Sie das Thema wechseln, cssVars() erneut ausführen, können Sie das Thema immer noch nicht wechseln. Der Grund dafür ist, dass die erneute Ausführung von cssVars() nach dem Einschalten der Überwachung ungültig ist. Schließlich besteht die einzige Möglichkeit darin, die Uhr auszuschalten und dann wieder einzuschalten. Der theme.js-Code für den erfolgreichen Theme-Wechsel lautet wie folgt:

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

Nach dem Login kopieren

Um alle Codes anzuzeigen, gehen Sie bitte zur Github-Projektadresse.

Merken Sie sich das Thema

Um die Funktion zum Erinnern des Themas zu implementieren, besteht eine darin, das Thema auf dem Server zu speichern, und die andere darin, das lokale Speicherthema zu verwenden . Der Einfachheit halber wird hier hauptsächlich die lokale Speichermethode des Themas verwendet, dh localStorage wird zum Speichern des Themas verwendet. Für eine spezifische Implementierung besuchen Sie bitte die Github-Projektadresse.

Dieser Artikel stammt von der chinesischen PHP-Website, Spalte CSS-Tutorial, willkommen zum Lernen

Das obige ist der detaillierte Inhalt vonVue verwendet CSS-Variablen, um die Theme-Switching-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!