当前位置：首页 > VUE

vue.js 实现弹窗

2026-01-20 08:02:38VUE

Vue.js 实现弹窗的方法

使用组件化方式创建弹窗

创建一个独立的弹窗组件（如 Modal.vue），通过 v-if 或 v-show 控制显示隐藏。组件内包含弹窗的模板、样式和逻辑。

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <span class="close" @click="close">×</span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isVisible: Boolean
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
}
.close {
  float: right;
  cursor: pointer;
}
</style>

在父组件中引入并使用弹窗组件：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Modal :isVisible="showModal" @close="showModal = false">
    <p>弹窗内容</p>
  </Modal>
</template>

<script>
import Modal from './Modal.vue';
export default {
  components: { Modal },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

使用 Vue 插件或第三方库

对于更复杂的弹窗需求，可以使用现成的 Vue 弹窗库：

Vuetify：提供 v-dialog 组件

<v-dialog v-model="dialog" width="500">
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">打开弹窗</v-btn>
  </template>
  <v-card>
    <v-card-title>标题</v-card-title>
    <v-card-text>内容</v-card-text>
  </v-card>
</v-dialog>

Element UI：提供 el-dialog 组件

<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog :visible.sync="dialogVisible" title="提示">
  <span>内容</span>
</el-dialog>

BootstrapVue：提供 b-modal 组件

<b-button v-b-modal.modal-1>打开弹窗</b-button>
<b-modal id="modal-1" title="弹窗标题">
  <p>内容</p>
</b-modal>

使用 Vue 的 Teleport 功能（Vue 3）

Vue 3 的 Teleport 可以将弹窗渲染到 DOM 中的任意位置，避免 z-index 问题：

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

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

动态创建弹窗组件

通过编程方式动态创建和销毁弹窗组件：

vue.js 实现弹窗

// 弹窗组件
const ModalComponent = {
  template: `<div class="modal"><div class="modal-content"><slot></slot></div></div>`
};

// 使用方法
const app = Vue.createApp({});
app.component('modal', ModalComponent);

// 动态挂载
const showModal = (content) => {
  const modal = Vue.createApp({
    template: `<modal>${content}</modal>`
  });
  const mountPoint = document.createElement('div');
  document.body.appendChild(mountPoint);
  modal.mount(mountPoint);
};