当前位置：首页 > VUE

用vue实现web弹窗

2026-02-20 18:54:23VUE

使用 Vue 实现 Web 弹窗

基础弹窗组件实现

创建一个基础的 Vue 弹窗组件，包含遮罩层和内容区域。以下是示例代码：

<template>
  <div class="modal-mask" v-if="show" @click.self="close">
    <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>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
    title: String
  },
  methods: {
    close() {
      this.$emit('update:show', false);
    }
  }
};
</script>

<style>
.modal-mask {
  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;
  z-index: 999;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.modal-body {
  padding: 15px;
}

.modal-footer {
  padding: 15px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>

在父组件中使用弹窗

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

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal v-model:show="showModal" title="示例弹窗">
      <p>这里是弹窗内容</p>
    </Modal>
  </div>
</template>

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

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

使用 Vue Teleport 优化弹窗

对于更复杂的应用，可以使用 Vue 3 的 Teleport 功能将弹窗渲染到 body 元素下，避免 z-index 问题：

<template>
  <teleport to="body">
    <div class="modal-mask" v-if="show" @click.self="close">
      <!-- 其余弹窗内容 -->
    </div>
  </teleport>
</template>

添加动画效果

为弹窗添加淡入淡出动画：

<template>
  <teleport to="body">
    <transition name="modal">
      <div class="modal-mask" v-if="show" @click.self="close">
        <!-- 弹窗内容 -->
      </div>
    </transition>
  </teleport>
</template>

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

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

可配置选项扩展

扩展弹窗组件，使其支持更多配置选项：

<script>
export default {
  props: {
    show: Boolean,
    title: String,
    width: {
      type: String,
      default: '400px'
    },
    showCloseButton: {
      type: Boolean,
      default: true
    },
    closeOnClickMask: {
      type: Boolean,
      default: true
    }
  },
  // ...
};
</script>

全局弹窗服务

创建一个全局弹窗服务，方便在任何组件中调用：

// modalService.js
import { createApp } from 'vue';

let instance;

export default {
  open(options) {
    const app = createApp({
      data() {
        return {
          show: true,
          ...options
        };
      },
      template: `
        <Modal v-model:show="show" :title="title">
          <p>{{ content }}</p>
        </Modal>
      `
    });

    app.component('Modal', ModalComponent);
    const mountNode = document.createElement('div');
    document.body.appendChild(mountNode);
    instance = app.mount(mountNode);

    return {
      close: () => {
        instance.show = false;
        setTimeout(() => {
          app.unmount();
          document.body.removeChild(mountNode);
        }, 300);
      }
    };
  }
};