Rumah > Artikel > hujung hadapan web > Pembangunan komponen Vue: Kaedah pelaksanaan komponen kotak modal
Pembangunan komponen Vue: Kaedah pelaksanaan komponen kotak modal
Dalam aplikasi web, kotak modal ialah kawalan UI biasa, boleh digunakan untuk memaparkan beberapa kandungan penting, seperti maklumat segera, maklumat amaran, menggesa pengguna untuk melakukan operasi tertentu, dsb. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk membangunkan komponen kotak modal mudah dan menyediakan contoh kod untuk rujukan.
Pertama kita perlu mentakrifkan komponen kotak modal, termasuk struktur HTML, gaya dan fungsi logik. Komponen biasanya mempunyai komponen induk yang menghantar sifat kepada komponen anak, dan komponen anak menghasilkan UI berdasarkan sifat.
Berikut ialah struktur HTML paling ringkas bagi kotak modal:
<template> <div class="modal"> <div class="modal-content"> <!-- modal header --> <div class="modal-header"> <h4>{{ title }}</h4> <button class="close-btn" @click="closeModal">×</button> </div> <!-- modal body --> <div class="modal-body"> <slot></slot> </div> </div> </div> </template>
Antaranya, kotak modal dibahagikan kepada kawasan berikut:
.modal { position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; } .modal-content { background-color: #fefefe; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.4); max-width: 600px; width: 70%; padding: 20px; } .modal-header { display: flex; justify-content: space-between; align-items: center; } .close-btn { font-size: 24px; font-weight: bold; color: #aaaaaa; }
export default { name: 'Modal', props: { title: { type: String, default: '' }, show: { type: Boolean, default: false } }, methods: { closeModal() { this.$emit('close'); } } }Di sini kita mentakrifkan dua atribut:
<template> <div v-if="show" class="modal"> <div class="modal-content"> <!-- modal header --> <div class="modal-header"> <h4>{{ title }}</h4> <button class="close-btn" @click="closeModal">×</button> </div> <!-- modal body --> <div class="modal-body"> <slot></slot> </div> </div> </div> </template>
<template> <div> <button @click="showModal">显示模态框</button> <Modal :title="title" :show="show" @close="closeModal"> <p>这里是模态框中的内容</p> </Modal> </div> </template> <script> import Modal from './Modal.vue'; export default { name: 'App', components: { Modal }, data() { return { title: '这里是模态框标题', show: false }; }, methods: { showModal() { this.show = true; }, closeModal() { this.show = false; } } } </script>Di sini, kami menggunakan komponen Modal dalam komponen induk dan lulus dalam tajuk dan tunjukkan atribut. Atribut show mengawal paparan dan keadaan tersembunyi kotak modal, dan atribut tajuk mengawal tajuk kotak modal. Selepas mengklik butang "Show Modal Box", kotak modal akan dipaparkan. Klik butang tutup dan kotak modal akan disembunyikan.
<template> <div v-if="show" class="modal"> <div class="modal-content"> <!-- modal header --> <div class="modal-header"> <h4>{{ title }}</h4> <button class="close-btn" @click="closeModal">×</button> </div> <!-- modal body --> <div class="modal-body"> <slot></slot> </div> </div> </div> </template> <script> export default { name: 'Modal', props: { title: { type: String, default: '' }, show: { type: Boolean, default: false } }, methods: { closeModal() { this.$emit('close'); } } } </script>App.vue
rreee
Atas ialah kandungan terperinci Pembangunan komponen Vue: Kaedah pelaksanaan komponen kotak modal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!