当前位置：首页 > VUE

js实现vue弹窗

2026-01-18 07:16:33VUE

实现 Vue 弹窗的基本方法

使用 Vue.js 实现弹窗功能可以通过组件化方式完成。以下是一个简单的弹窗实现示例，包含显示/隐藏控制、内容插槽和基础样式。

弹窗组件代码

创建 Modal.vue 文件：

<template>
  <div class="modal-mask" v-if="show" @click.self="close">
    <div class="modal-container">
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button @click="close">&times;</button>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button @click="close">关闭</button>
      </div>
    </div>
  </div>
</template>

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

<style>
.modal-mask {
  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;
  z-index: 1000;
}
.modal-container {
  background: white;
  border-radius: 8px;
  min-width: 300px;
  max-width: 80%;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #eee;
}
.modal-body {
  padding: 16px;
}
.modal-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>

使用弹窗组件

在父组件中使用：

js实现vue弹窗

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal v-model:show="showModal" title="示例弹窗">
      <p>这里是弹窗内容</p>
    </Modal>
  </div>
</template>

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

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

进阶功能实现

动画效果

为弹窗添加过渡动画，修改 Modal.vue：

<template>
  <transition name="modal">
    <div class="modal-mask" v-if="show" @click.self="close">
      <!-- 原有内容 -->
    </div>
  </transition>
</template>

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

全局弹窗服务

创建可编程的全局弹窗服务：

js实现vue弹窗

创建 modalService.js：
```
import Vue from 'vue'
```

const ModalConstructor = Vue.extend(require('./Modal.vue').default)

const modalService = { open(options) { const instance = new ModalConstructor({ propsData: options.props }) instance.$slots.default = [options.content] instance.$mount() document.body.appendChild(instance.$el) return instance } }

export default modalService


2. 在组件中使用：
```js
import modalService from './modalService'

export default {
  methods: {
    showGlobalModal() {
      modalService.open({
        props: {
          title: '全局弹窗'
        },
        content: '通过服务调用的弹窗内容'
      })
    }
  }
}