Comment obtenir le mode nuit dans Vue

Avec le développement d'Internet, de plus en plus de sites Web ou d'applications proposent la fonction mode nuit afin que les utilisateurs puissent l'utiliser plus confortablement la nuit ou dans des environnements sombres, tout en économisant l'énergie de la batterie. En tant que framework JavaScript moderne, Vue.js fournit également des méthodes pour implémenter le mode nuit. Cet article vous présentera en détail comment implémenter le mode nuit dans Vue.

1. Préparation

Avant de commencer, nous devons télécharger et installer le plug-in v-toggle-theme dans le projet Vue. Ce plug-in est un outil léger pour implémenter le mode nuit. Il est facile à utiliser et ne nécessite aucune configuration.

La manière d'installer le plug-in est la suivante :

1. Basculez vers le répertoire racine du projet Vue dans le terminal
2. Exécutez la commande suivante :

npm i v-toggle-theme --save

Comme indiqué sur l'image :

3. Une fois l'installation terminée, nous pouvons voir le plug-in v-toggle-theme dans le répertoire "node_modules" du projet.

2. Implémenter le mode nuit

Ensuite, nous présenterons en détail comment utiliser le plug-in v-toggle-theme pour implémenter la fonction mode nuit dans le projet Vue.

1. Introduisez le plug-in v-toggle-theme dans main.js.

import VToggleTheme from 'v-toggle-theme'
Vue.use(VToggleTheme)

2. Ajoutez le composant v-toggle-theme dans le composant App.vue et définissez les informations relatives au thème.

<template>
  <div>
    <v-toggle-theme>
      <template>
        <div>
          <router-view></router-view>
        </div>
      </template>
    </v-toggle-theme>
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;,
  data () {
    return {
      themeData: [{
        name: &#39;light&#39;,
        bg: &#39;#fff&#39;,
        color: &#39;#333&#39;,
        label: &#39;白天模式&#39;
      }, {
        name: &#39;dark&#39;,
        bg: &#39;#333&#39;,
        color: &#39;#fff&#39;,
        label: &#39;夜间模式&#39;
      }]
    }
  }
}
</script>

<style>
.theme {
  min-height: 100vh;
  padding: 20px;
  transition: background-color .3s, color .3s;
}
.theme.dark {
  background-color: #333;
  color: #fff;
}
</style>

Dans le code ci-dessus, nous avons utilisé le composant v-toggle-theme (utilisé pour changer de thème) et y avons ajouté des emplacements. Le slot peut insérer notre propre code HTML. Ici, nous utilisons la balise div qui enveloppe la vue de routage comme code HTML inséré.

En même temps, nous définissons également deux valeurs​​pour les données du thème : {name : 'light', bg : '#fff', color : '#333', label : 'Day Mode'} et {nom : 'dark', bg : '#333', couleur : '#fff', étiquette : 'Mode Nuit'}. Parmi eux, name est le nom du thème, bg est la couleur d'arrière-plan, color est la couleur du texte et label est le nom du thème, qui sera affiché dans le composant v-toggle-theme.

Enfin, nous définissons également des styles pour la couleur d'arrière-plan et la couleur du texte dans différents modes.

3. Ajoutez le style du mode nuit dans la feuille de style.

.theme.dark {
  background-color: #333;
  color: #fff;
}

Dans la feuille de style, nous avons ajouté la couleur d'arrière-plan et la couleur du texte pour le mode nuit. Nous pouvons facilement implémenter le mode nuit en ajoutant le nom de la classe .dark sur le composant v-toggle-theme.

3. Résumé

Cet article présente en détail comment utiliser le plug-in v-toggle-theme pour implémenter le mode nuit dans Vue.js. J'espère que cet article pourra être utile à tout le monde.

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!