当前位置：首页 > VUE

vue弹出框咋实现

2026-01-22 05:16:53VUE

使用 Vue 官方组件实现弹出框

Vue 提供了 <transition> 和动态组件（如 v-if/v-show）结合实现弹出框。以下是一个基础示例：

<template>
  <button @click="showModal = true">打开弹出框</button>
  <transition name="fade">
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span @click="showModal = false" class="close">&times;</span>
        <p>弹出框内容</p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return { showModal: false };
  }
};
</script>

<style>
.modal {
  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;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  position: relative;
}
.close {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库（如 Element UI）

Element UI 的 el-dialog 组件可快速实现功能完善的弹出框：

<template>
  <el-button @click="dialogVisible = true">打开弹出框</el-button>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <span>这是一段内容</span>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return { dialogVisible: false };
  }
};
</script>

需先安装 Element UI：

npm install element-ui

自定义可复用的弹出框组件

创建一个 Modal.vue 组件实现复用：

<template>
  <div v-if="isOpen" class="custom-modal">
    <div class="modal-body">
      <slot name="header"></slot>
      <slot name="body"></slot>
      <button @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: { isOpen: Boolean }
};
</script>

父组件调用方式：

vue弹出框咋实现

<template>
  <button @click="isModalOpen = true">打开自定义弹出框</button>
  <Modal :isOpen="isModalOpen" @close="isModalOpen = false">
    <template #header><h2>标题</h2></template>
    <template #body><p>自定义内容</p></template>
  </Modal>
</template>