如何在VUE中创建模态或对话框组件？

创建Modal.vue组件，使用Composition API定义接收modelValue和title的props，并通过emit触发update:modelValue事件实现v-model双向绑定；2. 在模板中使用slot分发内容，支持默认插槽及具名插槽header和footer；3. 通过@click.self实现点击遮罩层关闭弹窗；4. 在父组件中导入Modal并用ref控制显示隐藏，结合v-model使用；5. 可选增强功能包括监听Escape键关闭、添加过渡动画和焦点锁定。该模态框组件具有良好的可复用性、灵活性和基础的用户体验保障，完整实现了一个基于Vue 3的可复用模态框解决方案。

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: 'Modal'
  }
});

const emit = defineEmits(['update:modelValue']);

function close() {
  emit('update:modelValue', 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 'vue';
import Modal from './components/Modal.vue';

const showModal = ref(false);

function confirm() {
  alert('Confirmed!');
  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.



以上是如何在VUE中创建模态或对话框组件？的详细内容。更多信息请关注PHP中文网其他相关文章！