vue.js 实现弹窗

Vue.js 实现弹窗的方法

使用组件化方式实现弹窗

创建一个独立的弹窗组件（如 Modal.vue），通过 v-if 或 v-show 控制显示隐藏。父组件通过 props 传递数据或事件。

<!-- Modal.vue -->
<template>
  <div class="modal" v-if="show">
    <div class="modal-content">
      <slot></slot>
      <button @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['show']
}
</script>

<style scoped>
.modal {
  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;
}
.modal-content {
  background: white;
  padding: 20px;
}
</style>

父组件中使用：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Modal :show="showModal" @close="showModal = false">
    <p>弹窗内容</p>
  </Modal>
</template>

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

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

使用 Vue 插件实现全局弹窗

创建一个可复用的弹窗插件，通过 Vue 实例方法调用。

// modalPlugin.js
const ModalPlugin = {
  install(Vue) {
    Vue.prototype.$modal = {
      show(options) {
        // 创建弹窗实例的逻辑
      },
      hide() {
        // 隐藏弹窗的逻辑
      }
    }
  }
}

export default ModalPlugin

在 main.js 中注册：

import ModalPlugin from './modalPlugin'
Vue.use(ModalPlugin)

组件中使用：

this.$modal.show({
  title: '提示',
  content: '操作成功',
  onClose: () => console.log('弹窗关闭')
})

使用第三方库

常用弹窗库包括：

• Vuetify 的 v-dialog
• Element UI 的 el-dialog
• Quasar 的 QDialog
• vue-js-modal

以 Element UI 为例：

<template>
  <el-button @click="dialogVisible = true">打开弹窗</el-button>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </span>
  </el-dialog>
</template>

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

动态组件实现弹窗栈

对于需要管理多个弹窗的场景，可以使用动态组件：

<template>
  <button @click="openModal('modal1')">打开弹窗1</button>
  <button @click="openModal('modal2')">打开弹窗2</button>

  <component 
    :is="currentModal" 
    v-if="currentModal"
    @close="currentModal = null"
  />
</template>

<script>
import Modal1 from './Modal1.vue'
import Modal2 from './Modal2.vue'

export default {
  components: { Modal1, Modal2 },
  data() {
    return {
      currentModal: null
    }
  },
  methods: {
    openModal(name) {
      this.currentModal = name
    }
  }
}
</script>

使用 Teleport 实现弹窗定位

Vue 3 的 Teleport 可以解决 z-index 和定位问题：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Teleport to="body">
    <Modal v-if="showModal" @close="showModal = false"/>
  </Teleport>
</template>

每种方法适用于不同场景，组件化方式适合简单弹窗，插件方式适合全局弹窗管理，第三方库提供更多功能，动态组件适合复杂弹窗交互，Teleport 解决定位问题。