Create the Modal.vue component, use the Composition API to define props that receive modelValue and title, and use emit to trigger the update:modelValue event to achieve v-model bidirectional binding; 2. Use slot to distribute content in the template, supporting the default slot and named slot header and footer; 3. Use @click.self to close the pop-up window by clicking the mask layer; 4. Import the Modal in the parent component and use ref to control the display and hide it, and use it in conjunction with v-model; 5. Optional enhancements include listening to the Escape key close, adding transition animation and focus lock. This modal box component has good reusability, flexibility and basic user experience guarantee, and fully realizes a Vue 3-based reusable modal box solution.

Creating a modal or dialog component in Vue is straightforward and can be done in a reusable, clean way. Here's how to build one using Vue 3 (Composition API), but the concept works similarly in Vue 2.

? 1. Create the Modal Component

Start by creating a Modal.vue file:

 <!-- Modal.vue -->
<template>
  <div class="modal-overlay" v-if="modelValue" @click.self="onClose">
    <div class="modal">
      <div class="modal-header">
        <slot name="header">
          <h3>{{ title }}</h3>
        </slot>
        <button @click="close">?</button>
      </div>

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

      <div class="modal-footer">
        <slot name="footer">
          <button @click="close">Close</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    default: &#39;Modal&#39;
  }
});

const emit = defineEmits([&#39;update:modelValue&#39;]);

function close() {
  emit(&#39;update:modelValue&#39;, false);
}

function onClose() {
  // Only close if backdrop (overlay) is clicked
  close();
}
</script>

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

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

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

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

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

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
  text-align: right;
}

.modal-footer button {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

? 2. Use the Modal in a Parent Component

Now use it in any component with v-model :

 <!-- App.vue or any parent -->
<template>
  <div>
    <button @click="showModal = true">Open Modal</button>

    <Modal v-model="showModal" title="My Dialog">
      <p>This is the modal content. You can put anything here.</p>

      <template #footer>
        <button @click="showModal = false">Cancel</button>
        <button @click="confirm">Confirm</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);

function confirm() {
  alert(&#39;Confirmed!&#39;);
  showModal.value = false;
}
</script>

? Key Features Explained

• v-model binding : Uses modelValue prop and update:modelValue event for two-way binding.
• Click outside to close : The overlay ( modal-overlay ) listens for clicks, but @click.self ensures it only triggers when the backdrop (not the modal itself) is clicked.
• Slots : Allows flexible content:
  • Default slot for body
  • Named slots for header/footer
• Accessibility & UX : Close button, clean layout, responsive width.

? Optional Enhancements

You might want to add:

• Escape key support :

   watchEffect(() => {
    if (props.modelValue) {
      const handler = (e) => e.key === 'Escape' && close();
      window.addEventListener('keydown', handler);
      onUnmounted(() => window.removeEventListener('keydown', handler));
    }
  });

• Transitions with <transition></transition> for smooth fade-in/out.
• Focus trapping inside the modal for better accessibility.

---

That's it. You now have a reusable, flexible modal component in Vue that's easy to customize and integrate. Basically just pass v-model and drop in your content.



The above is the detailed content of How to create a modal or dialog component in Vue?. For more information, please follow other related articles on the PHP Chinese website!