vue 实现弹出框

使用 Vue 实现弹出框的方法

组件模板结构

在 Vue 中创建一个弹出框组件，模板部分需要包含遮罩层和内容区域：

<template>
  <div class="modal-mask" v-show="visible" @click.self="close">
    <div class="modal-container">
      <div class="modal-header">
        <slot name="header"></slot>
      </div>
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="close">关闭</button>
        </slot>
      </div>
    </div>
  </div>
</template>

组件脚本逻辑

组件需要接收控制显示/隐藏的 prop 并定义关闭方法：

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

基础样式设置

为弹出框添加基本样式：

<style scoped>
.modal-mask {
  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: 999;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 4px;
  min-width: 300px;
}
</style>

使用 v-model 控制显示

父组件中使用 v-model 控制弹出框显示：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal v-model="showModal">
      <template #header>
        <h3>标题</h3>
      </template>
      <template #body>
        <p>弹窗内容</p>
      </template>
    </Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue'

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

动画效果实现

通过 Vue 的 transition 组件添加动画：

<template>
  <transition name="modal">
    <div class="modal-mask" v-show="visible" @click.self="close">
      <!-- 其余内容不变 -->
    </div>
  </transition>
</template>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
</style>

可复用性增强

通过 provide/inject 实现深层嵌套调用：

// 在根组件
provide() {
  return {
    openModal: this.openGlobalModal
  }
}

// 在任何子组件
inject: ['openModal'],
methods: {
  showDialog() {
    this.openModal({
      title: '全局弹窗',
      content: '通过依赖注入调用的弹窗'
    })
  }
}

第三方库方案

使用 vue-final-modal 等成熟库快速实现：

npm install vue-final-modal

import { VFinalModal } from 'vue-final-modal'

export default {
  components: {
    VFinalModal
  }
}

<v-final-modal v-model="show">
  <template #title>
    第三方弹窗
  </template>
  <p>快速集成的弹窗内容</p>
</v-final-modal>