vue实现模态功能

Vue 实现模态框功能

方法一：使用组件和v-if/v-show控制显示

创建独立的模态框组件（如Modal.vue），通过props接收标题、内容等数据，使用v-if或v-show控制显示状态。

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
      <button @click="close">关闭</button>
    </div>
  </template>

<script>
export default {
  props: ['title', 'content', 'isVisible'],
  methods: {
    close() {
      this.$emit('close');
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.modal-content {
  background: white;
  margin: 100px auto;
  padding: 20px;
  width: 50%;
}
</style>

在父组件中引入并使用：

<template>
  <button @click="showModal = true">打开模态框</button>
  <Modal 
    title="提示" 
    content="这是模态框内容" 
    :isVisible="showModal"
    @close="showModal = false"
  />
</template>

<script>
import Modal from './Modal.vue';
export default {
  components: { Modal },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

方法二：使用Vue Teleport实现

Vue 3的Teleport功能可以更好处理模态框的DOM位置问题，避免z-index和样式冲突。

<template>
  <button @click="showModal = true">打开模态框</button>
  <Teleport to="body">
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <slot></slot>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </Teleport>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

方法三：使用第三方库

对于复杂需求，可以考虑成熟的UI库：

1. Element UI: this.$alert('内容', '标题', { confirmButtonText: '确定' })
2. Vuetify: <v-dialog v-model="dialog">...</v-dialog>
3. Bootstrap Vue: <b-modal v-model="show">...</b-modal>

关键注意事项

• 模态框通常需要position: fixed定位
• 考虑添加ESC键关闭功能
• 打开模态框时可能需要禁用页面滚动
• 添加动画过渡效果提升用户体验
• 确保模态框可访问性（ARIA属性）

进阶实现

对于更复杂的场景，可以：

• 使用Vuex或Pinia管理全局模态框状态
• 实现模态框堆叠（多个模态框同时打开）
• 添加自定义插槽支持不同内容类型
• 集成表单验证等功能