当前位置：首页 > VUE

vue弹出框实现

2026-03-09 22:10:12VUE

使用 Vue 组件实现基础弹出框

创建一个名为 Modal.vue 的组件，通过 v-if 或 v-show 控制显示状态：

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <slot></slot>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

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

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

通过事件触发弹出框

在父组件中控制弹出框状态：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Modal :isVisible="showModal" @close="showModal = false">
    <h3>弹窗标题</h3>
    <p>弹窗内容...</p>
  </Modal>
</template>

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

使用第三方库实现高级功能

安装 vue-js-modal 库：

vue弹出框实现

npm install vue-js-modal

在 main.js 中全局注册：

import VModal from 'vue-js-modal'
Vue.use(VModal)

组件内使用动态弹出框：

vue弹出框实现

<template>
  <button @click="show">打开弹窗</button>
</template>

<script>
export default {
  methods: {
    show() {
      this.$modal.show('example-modal', {
        title: '动态标题',
        text: '动态内容...'
      })
    }
  }
}
</script>

实现可复用的模态框服务

创建 modalService.js 提供全局控制：

import Vue from 'vue'

export default {
  install() {
    Vue.prototype.$modalService = {
      show(config) {
        const component = new Vue({
          render(h) {
            return h(ModalComponent, { props: config })
          }
        }).$mount()
        document.body.appendChild(component.$el)
      }
    }
  }
}

动画过渡效果

为弹出框添加 Vue 过渡效果：

<transition name="fade">
  <div class="modal" v-if="isVisible">
    <!-- 内容 -->
  </div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>