如何在VUE中構建可重複使用的模態組件？

創建一個可複用的Vue模態框組件，首先定義Modal.vue作為基礎容器，包含遮罩層、標題、內容和底部插槽；2. 使用插槽（slots）實現靈活性，通過header、default和footer插槽自定義內容；3. 在父組件中通過v-model:isOpen綁定控制顯示與隱藏，實現雙向通信；4. 可選增強功能包括添加過渡動畫、ESC鍵關閉、焦點鎖定和自定義類名；最終得到一個可複用、可定制且符合無障礙標準的模態框組件，適用於全應用範圍。

Building a reusable modal component in Vue is a practical way to avoid duplicating UI and logic across your app. A well-structured modal can be used for alerts, forms, confirmations, or any content that needs to appear on top of the current view. Here's how to create one that's flexible, clean, and easy to reuse.

1. Create a Base Modal Component

Start by creating a Modal.vue component. This will be your reusable container.

 <!-- components/Modal.vue -->
<template>
  <div v-if="isOpen" class="modal-overlay" @click="handleOverlayClick">
    <div class="modal" :style="{ width }" @click.stop>
      <!-- Header -->
      <div v-if="$slots.header || title" class="modal-header">
        <slot name="header">
          <h3>{{ title }}</h3>
        </slot>
        <button @click="close" class="modal-close">&times;</button>
      </div>

      <!-- Body -->
      <div class="modal-body">
        <slot />
      </div>

      <!-- Footer -->
      <div v-if="$slots.footer" class="modal-footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from &#39;vue&#39;

const emit = defineEmits([&#39;update:isOpen&#39;, &#39;close&#39;])

const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    default: &#39;&#39;
  },
  width: {
    type: String,
    default: &#39;500px&#39;
  },
  closeOnClickOutside: {
    type: Boolean,
    default: true
  }
})

const close = () => {
  emit(&#39;update:isOpen&#39;, false)
  emit(&#39;close&#39;)
}

const handleOverlayClick = () => {
  if (props.closeOnClickOutside) {
    close()
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>

2. Use Slots for Maximum Flexibility

The component uses Vue's named slots ( header , default body , footer ) so you can customize content without changing the base logic.

• Default slot : Main content.
• header slot : Replace or enhance the title area.
• footer slot : Add action buttons like "Cancel" and "Save".

This makes the modal work for forms, confirmations, or info popups.

3. Use the Modal in a Parent Component

Now use it anywhere with v-model -style binding.

 <!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="showModal = true">Open Modal</button>

    <Modal v-model:isOpen="showModal" title="User Details">
      <p>Enter user information below:</p>
      <input v-model="name" placeholder="Name" class="input" />

      <template #footer>
        <button @click="showModal = false" class="btn btn-secondary">Cancel</button>
        <button @click="save" class="btn btn-primary">Save</button>
      </template>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import Modal from &#39;@/components/Modal.vue&#39;

const showModal = ref(false)
const name = ref(&#39;&#39;)

const save = () => {
  alert(`Saved: ${name.value}`)
  showModal.value = false
}
</script>

✅ This uses v-model:isOpen thanks to the update:isOpen event.

4. Optional Enhancements

You can improve the modal further:

• Add transitions : Wrap the modal in a <transition> for smooth fade-in/out effects.

   <transition name="modal-fade">
    <div v-if="isOpen" class="modal-overlay">
      <!-- modal content -->
    </div>
  </transition>

• Trap focus (accessibility): Use directives or libraries to trap keyboard focus inside the modal.

• ESC key close : Add a key listener in onMounted :

   const handleEsc = (e) => {
    if (e.key === 'Escape') close()
  }
  onMounted(() => window.addEventListener('keydown', handleEsc))
  onUnmounted(() => window.removeEventListener('keydown', handleEsc))

• Pass custom classes : Add a modalClass prop to style the inner modal box dynamically.

---

Final Notes

This modal is:

• Reusable across the app
• Customizable via slots
• Controllable via v-model
• Accessible and clean

You can extract it into a UI library or use it with Pinia/Vuex for global modal state if needed.

Basically, just pass isOpen , listen for updates, and plug in your content. That's it.

以上是如何在VUE中構建可重複使用的模態組件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！