Saya seorang pemula dalam Vite/Vue3 dan pada masa ini saya menghadapi masalah di mana saya memerlukan gabungan pengetahuan komuniti.
Saya mencipta aplikasi Vite/Vue3 dan memasang TailwindCSS:
npm create vite@latest my-vite-vue-app -- --template vue cd my-vite-vue-app npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Kemudian saya mengikuti arahan pada halaman utama Tailwind:
Tambah laluan semua fail templat dalam fail tailwind.config.js.
Import fail ./src/index.css yang baru dibuat ke dalam fail ./src/main.js.
Cipta fail ./src/index.css dan tambahkan lapisan Tailwind arahan @tailwind pada setiap fail.
Sekarang saya mempunyai aplikasi Vite/Vue3/TailwindCSS yang sedang berjalan dan ingin menambah keupayaan untuk menogol mod gelap.
Dokumentasi Tailwind menunjukkan bahawa ini boleh dilakukan dengan menandainya dengan darkMode: 'class' 添加到 tailwind.config.js 来存档，然后将类 dark 切换为 <html>.
Saya melakukan kerja menggunakan kod berikut:
<html lang="en" id="html-root">
(...)
<body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<template>
<div>
<h1>This is an about page</h1>
<button @click="toggleDarkMode">Toggle</botton>
</div>
</template>
<script>
export default {
methods: {
toggleDarkMode() {
const element = document.getElementById('html-root')
if (element.classList.contains('dark')) {
element.classList.remove('dark')
} else {
element.classList.add('dark')
}
},
},
};
</script>
Ya, saya tahu ini bukan kod gaya Vue3. Dan, ya, saya tahu ia boleh digunakan element.classList.toggle() 而不是 .remove() 和 .add() . Tetapi mungkin pemula lain seperti saya akan melihat ini pada masa hadapan dan menghargai beberapa kod mudah untuk dimulakan. Jadi mohon belas kasihan...
Kini saya akhirnya mempunyai soalan untuk ditanya kepada komuniti:
Saya tahu memanipulasi DOM seperti ini bukanlah cara Vue melakukan sesuatu. Sudah tentu, saya mahu mencapai matlamat saya dengan cara yang betul. Tetapi apa yang perlu saya lakukan?
Percayalah, saya mencari di google selama berjam-jam dan tidak dapat mencari penyelesaian yang berfungsi tanpa memasang ini dan ini dan ini modul npm tambahan.
Tetapi saya mahukan pendekatan minimalis. Bergantunglah pada sesedikit mungkin agar tidak membebankan saya dan orang lain yang ingin mula belajar.
Dengan ini sebagai latar belakang - adakah anda mempunyai penyelesaian yang sesuai untuk saya dan pemula lain? :-)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Elemen sasaran acara anda adalah di luar aplikasi anda. Ini bermakna tiada cara untuk berinteraksi dengannya selain menanyakannya melalui kaedah yang tersedia dalam DOM.
Dalam erti kata lain, anda melakukan perkara yang betul . Jika elemen itu berada di dalam aplikasi anda, maka anda hanya memautkan kelas kepada atribut anda dan biarkan Vue mengendalikan butiran manipulasi DOM:
:class="{ dark: darkMode }"Tetapi bukan itu yang berlaku.
Sebagai nota sampingan, sangat penting bahawa kaedah togol anda tidak bergantung pada sama ada elemen
<body>mempunyai kelas untuk memutuskan sama ada ia perlu digunakan/dialih keluar. Anda harus mengekalkan nilai yang disimpan dalam keadaan aplikasi, yang sepatutnya menjadi satu-satunya sumber kebenaran anda.Ini ialah prinsip Vue yang anda tidak mahu pecahkan: biarkan data memacu keadaan DOM, bukan sebaliknya.
Nilai boleh diperolehi daripada keadaan semasa
<body>(apabila dipasang), tetapi sejak itu, perubahan kepada keadaan aplikasi akan menentukan sama ada kelas hadir pada elemen.vue2 contoh:
Lihat 3 contoh:
Jelas sekali, jika anda menggunakannya dalam berbilang komponen
darkMode的状态，您可能希望将darkMode的状态保留在data中的某个外部存储中，而不是本地（并通过compulatedsediakan dalam komponen anda).