当前位置：首页 > VUE

js实现vue弹窗窗口

2026-02-24 01:04:26VUE

Vue 弹窗实现方法

组件基础结构

创建一个名为Modal.vue的组件文件，包含模板、脚本和样式部分。弹窗通常需要v-model控制显示隐藏，并具备标题、内容区和操作按钮。

<template>
  <div class="modal-mask" v-show="visible" @click.self="close">
    <div class="modal-container">
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button @click="close">×</button>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button @click="confirm">确认</button>
        <button @click="close">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    confirm() {
      this.$emit('confirm')
      this.close()
    }
  }
}
</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: 1000;
}
.modal-container {
  background: white;
  border-radius: 4px;
  width: 400px;
  padding: 20px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>

动态挂载方式

对于全局弹窗，可以通过Vue.extend动态创建组件实例并挂载到DOM。这种方式适合不需要与父组件深度交互的场景。

// 在工具文件中创建showModal方法
import Vue from 'vue'
import Modal from './Modal.vue'

const ModalConstructor = Vue.extend(Modal)

function showModal(options) {
  const instance = new ModalConstructor({
    propsData: options.props
  })

  instance.$slots.default = [options.content]
  instance.$mount()
  document.body.appendChild(instance.$el)

  return new Promise(resolve => {
    instance.$on('confirm', () => resolve(true))
    instance.$on('update:visible', val => !val && resolve(false))
  })
}

// 使用示例
showModal({
  props: { title: '提示' },
  content: '确定要删除吗？'
}).then(confirmed => {
  console.log(confirmed ? '用户确认' : '用户取消')
})

过渡动画效果

为弹窗添加CSS过渡动画可以提升用户体验，在组件中添加transition包裹和对应的CSS规则。

<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;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
}
.modal-container {
  transition: transform 0.3s;
}
.modal-enter .modal-container,
.modal-leave-to .modal-container {
  transform: scale(0.9);
}
</style>

全局注册插件

将弹窗封装为Vue插件，方便在任何组件中通过this.$modal调用。

// modal-plugin.js
export default {
  install(Vue) {
    Vue.prototype.$modal = {
      show(options) {
        return showModal(options)
      }
    }
  }
}

// main.js
import ModalPlugin from './modal-plugin'
Vue.use(ModalPlugin)

// 组件中使用
this.$modal.show({
  props: { title: '系统提示' },
  content: '操作已成功'
})