当前位置：首页 > VUE

vue 实现模态框

2026-02-11 02:15:27VUE

使用 Vue 实现模态框

组件化实现

创建一个名为 Modal.vue 的组件文件，包含模板、脚本和样式部分。模板部分定义模态框的结构，脚本部分处理逻辑，样式部分定义外观。

<template>
  <div class="modal" v-if="isOpen">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
};
</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-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 500px;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}
</style>

在父组件中使用模态框

在父组件中引入 Modal 组件，并通过数据绑定控制其显示和隐藏。

<template>
  <div>
    <button @click="openModal">打开模态框</button>
    <Modal :isOpen="modalIsOpen" @close="closeModal">
      <h2>模态框标题</h2>
      <p>这里是模态框的内容。</p>
    </Modal>
  </div>
</template>

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

export default {
  components: {
    Modal
  },
  data() {
    return {
      modalIsOpen: false
    };
  },
  methods: {
    openModal() {
      this.modalIsOpen = true;
    },
    closeModal() {
      this.modalIsOpen = false;
    }
  }
};
</script>

动态内容传递

通过插槽（slot）实现动态内容传递，允许在父组件中自定义模态框的内容。

<Modal :isOpen="modalIsOpen" @close="closeModal">
  <h2>自定义标题</h2>
  <p>自定义内容区域。</p>
  <button @click="closeModal">关闭</button>
</Modal>

动画效果

通过 Vue 的过渡（transition）组件为模态框添加动画效果，提升用户体验。

<template>
  <transition name="fade">
    <div class="modal" v-if="isOpen">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

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

全局模态框服务

对于需要在多个组件中使用的模态框，可以创建一个全局模态框服务，通过事件总线或 Vuex 管理状态。

// modalService.js
import Vue from 'vue';

export const EventBus = new Vue();

export function showModal(content) {
  EventBus.$emit('showModal', content);
}

export function hideModal() {
  EventBus.$emit('hideModal');
}

在根组件中监听事件并控制模态框显示。

vue 实现模态框

<template>
  <div>
    <Modal :isOpen="modalIsOpen" @close="hideModal">
      <div v-html="modalContent"></div>
    </Modal>
    <router-view></router-view>
  </div>
</template>

<script>
import { EventBus } from './modalService';
import Modal from './Modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      modalIsOpen: false,
      modalContent: ''
    };
  },
  created() {
    EventBus.$on('showModal', (content) => {
      this.modalContent = content;
      this.modalIsOpen = true;
    });
    EventBus.$on('hideModal', () => {
      this.modalIsOpen = false;
    });
  }
};
</script>

通过以上方法，可以灵活地在 Vue 项目中实现模态框功能，满足不同场景的需求。