当前位置：首页 > VUE

vue实现模态框

2026-02-18 05:05:35VUE

Vue 实现模态框的方法

使用组件化方式创建模态框

创建一个独立的 Vue 组件作为模态框，通过 props 控制显示隐藏和内容。组件模板可以包含遮罩层、标题、内容和操作按钮。

<template>
  <div class="modal" v-if="visible">
    <div class="modal-mask"></div>
    <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="close">取消</button>
        <button @click="confirm">确定</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>

通过 v-model 控制显示状态

父组件中使用 v-model 绑定模态框的显示状态，实现双向绑定控制。

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <Modal v-model="showModal" title="提示">
      这里是模态框内容
    </Modal>
  </div>
</template>

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

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

使用 Teleport 优化 DOM 结构

Vue 3 的 Teleport 可以将模态框渲染到 body 元素下，避免样式和层级问题。

<template>
  <Teleport to="body">
    <div class="modal" v-if="visible">
      <!-- 模态框内容 -->
    </div>
  </Teleport>
</template>

添加过渡动画效果

使用 Vue 的 Transition 组件为模态框添加显示/隐藏的动画效果。

<template>
  <Transition name="modal">
    <div class="modal" v-if="visible">
      <!-- 模态框内容 -->
    </div>
  </Transition>
</template>

<style>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
</style>

全局模态框服务

创建可复用的全局模态框服务，通过 Vue 插件方式注册，在任何组件中调用。

// modalService.js
export default {
  install(app) {
    app.config.globalProperties.$modal = {
      show(options) {
        // 显示模态框逻辑
      },
      hide() {
        // 隐藏模态框逻辑
      }
    }
  }
}