Cara Membuat Reusable Modal Menggunakan Component Di Vue JS
Modals adalah salah satu component kunci dari antarmuka pengguna. Kami menyarankan Anda melihat atau menerima tanggapan dari pengguna tanpa menavigasi ke halaman lain. Buat component modal sehingga dapat digunakan kembali di semua halaman. Modal yang Anda buat adalah modal sederhana dengan konten statis di dalamnya.
Buat component VueJS
Buat file baru di aplikasi Vue Anda dan tentukan sebagai component Vue. Tetapkan nama component di bagian skrip.
<script>
export default {
name: 'Modal'
};
</script>
Gunakan Tailwind CSS untuk menata gaya component, Beri tahu kami jika Anda memerlukan tutorial/panduan untuk membangun UI menggunakan Tailwind CSS.
Modal.vue
<template>
<div class="modal">
<div class="container">
<div class="modal__title">Direction</div>
<p>Get a direction with your favourite apps</p>
<a href="#" class="btn gmaps">
<img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
</a>
<a href="#" class="btn waze">
<img src="https://img.icons8.com/color/420/waze.png"> Waze
</a>
<button class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
<script>
export default {
name: 'Modal'
};
</script>
<style lang="css" scoped>
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
Panggil component di halaman
Misalnya, Anda ingin memanggil component ini pada halaman indeks. Pertama, import component Vue terlebih dahulu dan atur di objek component. Pastikan Anda memanggil jalur yang benar.
App.vue
<script>
import ModalDirection from "@/components/common/Modal";
export default {
components: {
ModalDirection
}
};
</script>
component sekarang berhasil diimpor ke halaman. Anda dapat menggunakan component dengan tag ini.
<modal-direction></modal-direction>
<ModalDirection></ModalDirection>
App.vue
<template>
<div>
<modal-direction></modal-direction>
</div>
</template>
<script>
import ModalDirection from "@/components/common/Modal";
export default {
components: {
ModalDirection
}
};
</script>
Tambahkan fungsi secara modal
Salah satu fitur modal adalah apakah itu dapat ditampilkan. Ditampilkan saat elemen lain memicu fungsi. Bagaimana cara mengontrol fungsionalitas antar component?
Saya perlu menambahkan penyatuan data baru ke App.vue, saya menyebutnya modalOpen dan menyetelnya ke false. Mencegah modals muncul ketika pengguna memasuki halaman.
App.vue
<script>
import ModalDirection from "@/components/common/Modal";
export default {
components: {
ModalDirection
},
data() {
return {
modalOpen: false
};
}
};
</script>
Mari buat tombol untuk mengganti nilai modalOpen.
App.vue
<template>
<div>
<button class="btn" @click="openModal">Open Modal</button>
<modal-direction v-model="modalOpen"></modal-direction>
</div>
</template>
<script>
import ModalDirection from "@/components/common/Modal";
export default {
components: {
ModalDirection
},
data() {
return {
modalOpen: false
}
},
methods: {
openModal() {
this.modalOpen = !this.modalOpen;
}
}
};
</script>
Kemudian tetapkan v-model modalOpen ke component ModalDirection.
Terima data dari parent di dalam component
Data sekarang diteruskan ke component. Edit component untuk memastikan sudah diterima dengan baik. Kita akan membuat prop untuk menerima data dari model yang baru saja kita tulis, directModal.
Modal.vue
<template>
<div class="modal">
<div class="container">
<div class="modal__title">Direction</div>
<p>Get a direction with your favourite apps</p>
<a href="#" class="btn gmaps">
<img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
</a>
<a href="#" class="btn waze">
<img src="https://img.icons8.com/color/420/waze.png"> Waze
</a>
<button class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
value: {
required; true
}
}
};
</script>
<style lang="css" scoped>
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
Sekarang Anda dapat mengakses data Anda dari orang tua Anda . Anda dapat menggunakan kode ini untuk mengakses data dari v-model.
Tags template
{{ value }}
Tags skrip
{{this.nilai}}
Kontrol visibilitas modal
Jika component menerima true dari induknya, itu harus menampilkan modal. Modals sekarang sepenuhnya terlihat. Anda perlu mengontrol visibilitas modal dari nilainya.
Untungnya, ada v-show untuk menyederhanakan semua ini. Cukup tambahkan tag v-show ke tag modal.
Modal.vue
<template>
<div class="modal" v-show="value">
<div class="container">
<div class="modal__title">Direction</div>
<p>Get a direction with your favourite apps</p>
<a href="#" class="btn gmaps">
<img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
</a>
<a href="#" class="btn waze">
<img src="https://img.icons8.com/color/420/waze.png"> Waze
</a>
<button class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
Modals hanya terlihat jika nilainya disetel ke true.
Kirim sinyal ke parent
Keren, klik tombol untuk melihat modalnya. Sayangnya, ada satu masalah terakhir. Bagaimana cara menutup modal?
Saat ini, parent mengontrol modal dari nilai v-model. Untuk saat ini, mari tambahkan metode ke tombol tutup untuk meneruskan data ke parent menggunakan peristiwa khusus.
Modal.vue
<template>
<div class="modal" v-show="value">
<div class="container">
<div class="modal__title">Direction</div>
<p>Get a direction with your favourite apps</p>
<a href="#" class="btn gmaps">
<img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
</a>
<a href="#" class="btn waze">
<img src="https://img.icons8.com/color/420/waze.png"> Waze
</a>
<button @click.prevent="close"
class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
value: {
required: true
}
},
methods: {
close() {
this.$emit("input", !this.value);
}
}
};
</script>
<style lang="css" scoped>
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
Kiat Singkat: Gunakan .prevent untuk mencegah tindakan default peristiwa terpicu. Ini dapat digunakan untuk button, form, anchor link, dll.
Secara default, event dipanggil sebagai input sebagai event karena Anda melewatkan data melalui v-model component.
Modal saat ini bekerja. Anda dapat menggunakan component untuk menghidupkan dan mematikannya. Bagian yang terbaik adalah dapat digunakan kembali. Anda dapat menggunakannya di halaman lain tanpa harus menulis kode lagi.
Source Code
Modal.vue
<template>
<div class="modal" v-show="value">
<div class="container">
<div class="modal__title">Direction</div>
<p>Get a direction with your favourite apps</p>
<a href="#" class="btn gmaps">
<img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
</a>
<a href="#" class="btn waze">
<img src="https://img.icons8.com/color/420/waze.png"> Waze
</a>
<button @click.prevent="close"
class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
value: {
required: true
}
},
methods: {
close() {
this.$emit("input", !this.value);
}
}
};
</script>
<style lang="css" scoped>
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
>App.vue
<template>
<div>
<button class="btn" @click="openModal">Open Modal</button>
<modal-direction v-model="modalOpen"></modal-direction>
</div>
</template>
<script>
import ModalDirection from "@/components/common/Modal";
export default {
components: {
ModalDirection
},
data() {
return {
modalOpen: false
}
},
methods: {
openModal() {
this.modalOpen = !this.modalOpen;
}
}
};
</script>
Semangat, selamat mencoba :)