Rumah > Artikel > hujung hadapan web > 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:
npm i v-toggle-theme --save
Seperti yang ditunjukkan dalam gambar:
2. Laksanakan mod malam
Seterusnya, kami akan memperkenalkan secara terperinci cara menggunakan pemalam v-toggle-theme untuk melaksanakan fungsi mod malam dalam projek Vue.
import VToggleTheme from 'v-toggle-theme' Vue.use(VToggleTheme)
<template> <div> <v-toggle-theme> <template> <div> <router-view></router-view> </div> </template> </v-toggle-theme> </div> </template> <script> export default { name: 'App', data () { return { themeData: [{ name: 'light', bg: '#fff', color: '#333', label: '白天模式' }, { name: 'dark', bg: '#333', color: '#fff', label: '夜间模式' }] } } } </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.
.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!