当前位置：首页 > VUE

vue3.0实现弹窗

2026-01-21 04:58:34VUE

Vue 3.0 实现弹窗的方法

使用 Teleport 组件实现弹窗

Vue 3.0 提供了 Teleport 组件，可以将弹窗内容渲染到 DOM 中的任意位置，避免父组件的样式影响弹窗的显示。

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h3>弹窗标题</h3>
        <p>弹窗内容</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </Teleport>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const showModal = ref(false);
    return { showModal };
  }
};
</script>

<style>
.modal {
  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;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

使用第三方库实现弹窗

许多第三方库如 Element Plus、Ant Design Vue 提供了现成的弹窗组件，可以快速集成到项目中。

以 Element Plus 为例：

vue3.0实现弹窗

<template>
  <el-button @click="dialogVisible = true">打开弹窗</el-button>
  <el-dialog v-model="dialogVisible" title="提示" width="30%">
    <span>这是一段内容</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const dialogVisible = ref(false);
    return { dialogVisible };
  }
};
</script>

创建可复用的弹窗组件

通过创建一个独立的弹窗组件，可以在项目中多处复用。

弹窗组件 (Modal.vue)：

vue3.0实现弹窗

<template>
  <Teleport to="body">
    <div v-if="isOpen" class="modal">
      <div class="modal-content">
        <slot name="header">
          <h3>{{ title }}</h3>
        </slot>
        <slot></slot>
        <slot name="footer">
          <button @click="$emit('close')">关闭</button>
        </slot>
      </div>
    </div>
  </Teleport>
</template>

<script>
export default {
  props: {
    isOpen: Boolean,
    title: {
      type: String,
      default: '默认标题'
    }
  },
  emits: ['close']
};
</script>

使用弹窗组件：

<template>
  <button @click="isModalOpen = true">打开弹窗</button>
  <Modal :isOpen="isModalOpen" @close="isModalOpen = false">
    <p>自定义内容</p>
  </Modal>
</template>

<script>
import { ref } from 'vue';
import Modal from './Modal.vue';
export default {
  components: { Modal },
  setup() {
    const isModalOpen = ref(false);
    return { isModalOpen };
  }
};
</script>

实现动画效果

可以通过 Vue 的 Transition 组件为弹窗添加动画效果。

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <h3>弹窗标题</h3>
          <p>弹窗内容</p>
          <button @click="showModal = false">关闭</button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

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

这些方法可以根据项目需求选择使用，Teleport 适合自定义弹窗，第三方库提供开箱即用的解决方案，而可复用组件则适合需要多次使用的场景。

分享给朋友：