Vue 3.0实现可复用Modal组件教程

在 Vue 3.0 中实现一个 Modal 组件是一个常见的需求。下面是一个简单的实现示例，展示了如何使用 Vue 3.0 的 Composition API 来创建一个可复用的 Modal 组件。

1. 创建 Modal 组件

首先，我们创建一个 Modal.vue 文件，定义 Modal 组件的基本结构和样式。

<template>
  <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content">
      <slot></slot>
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Modal',
  setup(_, { emit }) {
    const isVisible = ref(false);

    const openModal = () => {
      isVisible.value = true;
    };

    const closeModal = () => {
      isVisible.value = false;
      emit('close');
    };

    return {
      isVisible,
      openModal,
      closeModal,
    };
  },
};
</script>

<style scoped>
.modal-overlay {
  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: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

2. 使用 Modal 组件

接下来，我们在父组件中使用这个 Modal 组件。

<template>
  <div>
    <button @click="openModal">打开 Modal</button>
    <Modal ref="modal" @close="handleClose">
      <h2>这是一个 Modal</h2>
      <p>这是 Modal 的内容。</p>
    </Modal>
  </div>
</template>

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

export default {
  components: {
    Modal,
  },
  setup() {
    const modal = ref(null);

    const openModal = () => {
      modal.value.openModal();
    };

    const handleClose = () => {
      console.log('Modal 已关闭');
    };

    return {
      modal,
      openModal,
      handleClose,
    };
  },
};
</script>

3. 解释代码

• Modal 组件:

  • isVisible 是一个响应式变量，用于控制 Modal 的显示和隐藏。
  • openModal 和 closeModal 方法分别用于打开和关闭 Modal。
  • emit('close') 在关闭 Modal 时触发一个 close 事件，父组件可以监听这个事件来执行一些操作。

• 父组件:

  • 通过 ref 获取 Modal 组件的实例，并调用 openModal 方法来打开 Modal。
  • 监听 close 事件，当 Modal 关闭时执行 handleClose 方法。

4. 样式说明

• modal-overlay 是 Modal 的背景层，覆盖整个屏幕，点击背景层可以关闭 Modal。
• modal-content 是 Modal 的内容区域，居中显示，并带有一些基本的样式。

5. 进一步优化

• 动画效果: 可以使用 Vue 的过渡系统（<transition>）为 Modal 添加淡入淡出效果。
• 可配置性: 可以通过 props 传递更多的配置选项，例如 Modal 的宽度、高度、是否显示关闭按钮等。
• 全局状态管理: 如果 Modal 需要在多个组件中使用，可以考虑将其状态提升到 Vuex 或 Pinia 中进行管理。

这个示例展示了如何使用 Vue 3.0 的 Composition API 来创建一个简单的 Modal 组件。你可以根据实际需求进一步扩展和优化这个组件。