vue 实现弹窗组件

实现弹窗组件的基本结构

在 Vue 中实现弹窗组件通常需要创建一个可复用的组件，包含模板、样式和逻辑。弹窗组件通常需要支持显示/隐藏控制、内容插槽和自定义样式。

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

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

<style scoped>
.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;
}
</style>

使用弹窗组件

在父组件中引入并使用弹窗组件，通过 v-model 或自定义事件控制弹窗的显示和隐藏。

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <Modal :isVisible="showModal" @close="showModal = false">
      <h3>Modal Title</h3>
      <p>This is the modal content.</p>
    </Modal>
  </div>
</template>

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

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

支持自定义内容

通过插槽（Slots）可以让弹窗组件支持自定义内容，包括标题、正文和底部按钮。

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <slot name="header"></slot>
      <slot name="body"></slot>
      <slot name="footer"></slot>
      <button @click="close">Close</button>
    </div>
  </div>
</template>

在父组件中使用具名插槽：

<Modal :isVisible="showModal" @close="showModal = false">
  <template #header>
    <h3>Custom Header</h3>
  </template>
  <template #body>
    <p>Custom body content.</p>
  </template>
  <template #footer>
    <button @click="handleSubmit">Submit</button>
  </template>
</Modal>

动画效果

通过 Vue 的过渡系统（Transition）可以为弹窗添加动画效果，增强用户体验。

<template>
  <transition name="fade">
    <div class="modal" v-if="isVisible">
      <div class="modal-content">
        <slot></slot>
        <button @click="close">Close</button>
      </div>
    </div>
  </transition>
</template>

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

全局弹窗管理

对于需要在多个组件中使用的弹窗，可以通过 Vue 的插件机制或事件总线实现全局弹窗管理。

// modalPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$modal = {
      show(component, props) {
        // 动态挂载弹窗组件
      },
      hide() {
        // 卸载弹窗组件
      }
    };
  }
};

在 main.js 中注册插件：

import ModalPlugin from './modalPlugin.js';
Vue.use(ModalPlugin);

在组件中调用全局弹窗：

this.$modal.show(ModalComponent, { title: 'Global Modal' });

响应式设计

确保弹窗在不同屏幕尺寸下表现良好，可以通过 CSS 媒体查询实现响应式布局。

.modal-content {
  width: 80%;
  max-width: 600px;
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
  }
}