Bagaimana untuk mendapatkan mod malam dalam vue

Dengan perkembangan Internet, semakin banyak laman web atau aplikasi menyediakan fungsi mod malam supaya pengguna boleh menggunakannya dengan lebih selesa pada waktu malam atau dalam persekitaran cahaya gelap, sambil turut menjimatkan kuasa bateri. Sebagai rangka kerja JavaScript moden, Vue.js juga menyediakan kaedah untuk melaksanakan mod malam. Artikel ini akan memperkenalkan anda secara terperinci cara melaksanakan mod malam dalam Vue.

1. Persediaan

Sebelum kita mula, kita perlu memuat turun dan memasang pemalam v-toggle-theme dalam projek Vue. Pemalam ini ialah alat ringan untuk melaksanakan mod malam Ia mudah digunakan dan tidak memerlukan sebarang konfigurasi.

Pasang pemalam seperti berikut:

1. Tukar ke direktori akar projek Vue dalam terminal
2. Laksanakan arahan berikut:

npm i v-toggle-theme --save

Seperti yang ditunjukkan dalam gambar:

3. Selepas pemasangan selesai, kita boleh melihat pemalam v-toggle-theme dalam "node_modules " direktori projek.

2. Laksanakan mod malam

Seterusnya, kami akan memperkenalkan secara terperinci cara menggunakan pemalam v-toggle-theme untuk melaksanakan fungsi mod malam dalam projek Vue.

1. Perkenalkan pemalam v-togol-tema ke main.js.

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

2. Tambah komponen v-toggle-theme dalam komponen App.vue dan tetapkan maklumat berkaitan tema.

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

Dalam kod di atas, kami telah menggunakan komponen v-toggle-theme (digunakan untuk menukar tema) dan menambah slot padanya. Slot boleh memasukkan kod HTML kita sendiri Di sini kita menggunakan tag div yang membungkus pandangan penghalaan sebagai kod HTML yang dimasukkan.

Pada masa yang sama, kami juga menetapkan dua nilai ​​​​untuk data tema: {name: 'light', bg: '#fff', color: '#333', label: 'Daytime Mod'} dan {nama : 'gelap', bg: '#333', warna: '#fff', label: 'mod malam'}. Antaranya, nama ialah nama tema, bg ialah warna latar belakang, warna ialah warna teks, dan label ialah nama tema, yang akan dipaparkan dalam komponen v-toggle-theme.

Akhir sekali, kami juga menetapkan gaya untuk warna latar belakang dan warna teks dalam mod yang berbeza.

3. Tambahkan gaya mod malam pada helaian gaya.

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

Dalam lembaran gaya, kami menambahkan warna latar belakang dan warna teks untuk mod malam. Kita boleh melaksanakan mod malam dengan mudah dengan menambahkan nama kelas .dark pada komponen v-toggle-theme.

3. Ringkasan

Artikel ini memperkenalkan secara terperinci cara menggunakan pemalam v-toggle-theme untuk melaksanakan mod malam dalam Vue.js. Saya harap artikel ini dapat membantu semua orang.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan mod malam dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!