Vue utilise des variables CSS pour implémenter la fonction de changement de thème-tutoriel CSS-php.cn

Vue utilise des variables CSS pour implémenter la fonction de changement de thème

angryTom

Libérer： 2019-11-29 16:47:05

avant

3659 Les gens l'ont consulté

La gestion des thèmes est souvent visible sur les sites Web. L'idée générale est de séparer les styles CSS liés au thème et de charger les fichiers de style CSS correspondants lorsque l'utilisateur sélectionne le thème. La plupart des navigateurs sont désormais bien compatibles avec les variables CSS et les styles thématiques sont plus faciles à gérer. Récemment, j'ai utilisé des variables CSS pour effectuer une pratique de thématisation dans le projet Vue. Jetons un coup d'œil à l'ensemble du processus.

Vue utilise des variables CSS pour implémenter la fonction de changement de thème

Adresse du projet Github https://github.com/JofunLiang/vue-project-themable-demo

Adresse de la démo https://jofunliang.github .io/vue-project-themable-demo/

Test de faisabilité

Afin de tester la faisabilité de la méthode, créez un nouveau dossier de thèmes sous le dossier public . Et créez un nouveau fichier default.css dans le dossier themes :

:root {
  --color: red;
}

Copier après la connexion

Apprentissage recommandé : Tutoriel vidéo CSS

dans Introduisez le style externe theme.css dans le fichier index.html du dossier public, comme suit :

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

Copier après la connexion

Ensuite, utilisez la variable CSS dans 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>

Copier après la connexion

Ensuite, lancez le projet et ouvrez la page dans le navigateur, la page s'affiche normalement.

Remarque : @vue/cli utilisant la balise de lien pour introduire des styles CSS peut signaler une erreur "Nous sommes désolés mais vue-skin-peeler-demo ne fonctionne pas correctement sans l'activation de JavaScript. S'il vous plaît permettez-lui de continuer. Cela est dû au fait que @vue/cli regroupe tous les fichiers du répertoire src via webpack. Par conséquent, les ressources de fichiers statiques doivent être placées dans le dossier public (si la version @vue/cli 2.x est placée dans static).

Implémentation du changement de thème

L'idée du changement de thème ici est de remplacer l'attribut href de la balise de lien. Par conséquent, vous avez besoin. pour écrire une fonction de remplacement dans src Créez un nouveau fichier themes.js dans le répertoire avec le code suivant :

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

Copier après la connexion

Ensuite, créez default.css et dark.css sous le fichier de thèmes Deux fichiers de thème. Créez des variables CSS pour implémenter des thèmes. Pour implémenter le changement de thème avec des variables CSS, veuillez vous référer à un autre article Premier contact avec les variables CSS

Compatibilité

Le navigateur IE et certains navigateurs plus anciens ne prennent pas en charge les variables CSS, par conséquent, nécessite css-vars-ponyfill, un ponyfill qui fournit une prise en charge côté client des propriétés personnalisées CSS (également appelées « variables CSS ») dans les navigateurs anciens et modernes. Puisque vous devez activer la surveillance de la surveillance, vous devez également installer MutationObserver.js.

Installation :

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

Copier après la connexion

Ensuite, introduisez-le et utilisez-le dans le fichier thèmes.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

Copier après la connexion

Après avoir allumé la montre, cliquez sur IE 11 navigateur Basculer le commutateur de thème ne fonctionne pas. Par conséquent, si vous réexécutez cssVars() à chaque fois que vous changez de thème, vous ne pouvez toujours pas changer de thème. La raison est que la réexécution de cssVars() après avoir activé la montre n'est pas valide. Finalement, la seule option est d’éteindre la montre puis de la rallumer. Le code theme.js pour changer de thème avec succès est le suivant :

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

Copier après la connexion

Pour voir tous les codes, veuillez vous rendre à l'adresse du projet Github.

Mémoriser le thème

Pour implémenter la fonction de mémorisation du thème, l'une consiste à enregistrer le thème sur le serveur et l'autre consiste à utiliser le thème de stockage local . Pour plus de commodité, la méthode de stockage local du thème est principalement utilisée ici, c'est-à-dire que localStorage est utilisé pour stocker le thème. Pour une implémentation spécifique, veuillez visiter l'adresse du projet Github.

Cet article provient du site Web PHP chinois, colonne Tutoriel CSS, bienvenue pour apprendre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!