当前位置：首页 > VUE

vue实现模态框

2026-03-09 17:58:50VUE

使用 Vue 实现模态框

在 Vue 中实现模态框可以通过组件化的方式完成。以下是一种常见的实现方法，包括组件定义、状态管理和动画效果。

创建模态框组件

创建一个名为 Modal.vue 的组件文件，内容如下：

<template>
  <transition name="modal">
    <div class="modal-mask" v-show="show">
      <div class="modal-wrapper">
        <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 class="modal-default-button" @click="$emit('close')">
                Close
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

在父组件中使用模态框

在需要使用模态框的父组件中，可以这样使用：

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <Modal :show="showModal" @close="showModal = false">
      <template v-slot:header>
        <h3>Modal Title</h3>
      </template>
      <template v-slot:body>
        <p>Modal content goes here</p>
      </template>
    </Modal>
  </div>
</template>

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

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

添加动画效果

模态框组件已经包含了过渡动画效果，通过 Vue 的 <transition> 组件实现。CSS 中定义了进入和离开时的动画效果。

可选的改进方向

对于更复杂的模态框需求，可以考虑以下改进：

支持动态宽度和高度
添加 ESC 键关闭功能
实现点击模态框外部区域关闭
添加多种预设样式
支持 Promise API 方式调用

通过插件方式使用

如果需要全局使用模态框，可以将其注册为插件：

vue实现模态框

// modal-plugin.js
import Modal from './Modal.vue'

export default {
  install(Vue) {
    Vue.component('Modal', Modal)
  }
}

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

这样可以在任何组件中直接使用 <modal> 标签而不需要单独导入。