如何利用 Vue 的 `provide`/`inject` 和 `Teleport`，设计一个可扩展的全局模态框和弹窗管理器？

各位观众，欢迎来到今天的“Vue 全局模态框和弹窗管理器设计”讲座！我是你们的老朋友，今天我们来聊聊如何用 Vue 的 provide/inject 和 Teleport，打造一个灵活可扩展的全局模态框系统。

今天咱们的目标是：让你的模态框像水龙头一样，想在哪儿拧开就在哪儿拧开，而且拧出来的水（模态框）还干净卫生、样式统一，方便管理。

第一部分：需求分析与设计思路

首先，咱们得明确需求。一个好的全局模态框管理器应该具备以下特点：

1. 全局可用： 可以在任何组件中方便地调用，不需要层层传递 props。
2. 可扩展性： 方便添加新的模态框类型，而不需要修改核心逻辑。
3. 样式统一： 所有模态框都应该遵循统一的样式规范。
4. 易于管理： 能够方便地控制模态框的显示和隐藏。
5. 避免污染： 模态框内容不应该被父组件的样式所影响。

针对这些需求，我们的设计思路如下：

• provide/inject 负责全局状态共享： 创建一个模态框管理器，通过 provide 将其注入到整个应用中，任何组件都可以通过 inject 获取管理器实例。
• Teleport 负责将模态框渲染到 body 下： 避免模态框被父组件的样式所影响，同时也能保证模态框始终位于最上层。
• 组件化模态框内容： 每个模态框类型都对应一个独立的 Vue 组件，方便扩展和维护。
• 队列管理： 使用队列来管理多个模态框，确保它们按照正确的顺序显示和关闭。

第二部分：核心代码实现

接下来，让我们开始撸代码，实现我们的全局模态框管理器。

1. 创建 ModalManager（模态框管理器）

// ModalManager.js
import { reactive } from 'vue';

class ModalManager {
  constructor() {
    this.modals = reactive([]); // 使用 reactive 创建响应式数组
  }

  open(modalOptions) {
    // modalOptions 包含组件、props 等信息
    this.modals.push(modalOptions);
  }

  close(modalId) {
    const index = this.modals.findIndex(modal => modal.id === modalId);
    if (index !== -1) {
      this.modals.splice(index, 1);
    }
  }

  closeAll() {
      this.modals.length = 0; // 清空数组
  }
}

export default new ModalManager();

这段代码定义了一个 ModalManager 类，它包含一个 modals 数组，用于存储当前显示的模态框的信息。open 方法用于添加新的模态框，close 方法用于关闭指定的模态框。注意，modals 使用了 reactive 创建，这样 Vue 才能追踪数组的变化，并在模态框显示/隐藏时更新视图。

2. 创建 ModalProvider（模态框提供者）

// ModalProvider.vue
<template>
  <slot />
  <teleport to="body">
    <div class="modal-container">
      <transition-group name="modal" tag="div">
        <component
          v-for="modal in modals"
          :key="modal.id"
          :is="modal.component"
          v-bind="modal.props"
          @close="closeModal(modal.id)"
        />
      </transition-group>
    </div>
  </teleport>
</template>

<script>
import { inject, provide, onMounted } from 'vue';
import modalManager from './ModalManager';

export default {
  setup() {
    provide('modalManager', modalManager); // 提供 modalManager

    const modals = modalManager.modals;

    const closeModal = (modalId) => {
      modalManager.close(modalId);
    };

    return {
      modals,
      closeModal,
    };
  },
  mounted() {
      // 可以在这里添加全局的样式，例如禁用滚动条
      document.body.classList.add('modal-open');
  },
  beforeUnmount() {
      // 移除全局样式
      document.body.classList.remove('modal-open');
  }
};
</script>

<style scoped>
.modal-container {
  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: 1000; /* 确保模态框在最上层 */
}

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

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
/* 可以添加更详细的动画效果 */
</style>

ModalProvider 组件做了以下几件事：

• 使用 provide 将 modalManager 实例注入到整个应用中。
• 使用 Teleport 将模态框的 HTML 结构渲染到 body 下。
• 使用 transition-group 添加动画效果。
• 监听 close 事件，调用 modalManager.close 关闭模态框。
• 在组件挂载和卸载时，添加/移除 modal-open class，用来控制全局滚动条。

3. 创建一个简单的 Modal 组件 (示例)

// MyModal.vue
<template>
  <div class="my-modal">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    content: {
      type: String,
      default: '默认内容',
    },
  },
};
</script>

<style scoped>
.my-modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
</style>

这是一个简单的模态框组件，它接收 title 和 content 两个 props，并在点击“关闭”按钮时触发 close 事件。

4. 在 App.vue 中使用 ModalProvider

// App.vue
<template>
  <modal-provider>
    <button @click="openModal">打开模态框</button>
    <button @click="openAnotherModal">打开另一个模态框</button>
    <button @click="closeAll">关闭所有模态框</button>
    <router-view />
  </modal-provider>
</template>

<script>
import ModalProvider from './components/ModalProvider.vue';
import MyModal from './components/MyModal.vue';
import AnotherModal from './components/AnotherModal.vue'; // 假设你有另一个模态框组件
import { inject } from 'vue';

export default {
  components: {
    ModalProvider,
  },
  setup() {
    const modalManager = inject('modalManager'); // 注入 modalManager

    const openModal = () => {
      modalManager.open({
        id: 'my-modal',
        component: MyModal,
        props: {
          title: '我的模态框',
          content: '这是一个测试模态框。',
        },
      });
    };

    const openAnotherModal = () => {
        modalManager.open({
          id: 'another-modal',
          component: AnotherModal,
          props: {
            title: '另一个模态框',
            content: '这是另一个测试模态框。',
          },
        });
      };

      const closeAll = () => {
          modalManager.closeAll();
      }

    return {
      openModal,
      openAnotherModal,
      closeAll
    };
  },
};
</script>

在 App.vue 中，我们首先引入 ModalProvider 组件，并将其作为根组件。然后，我们通过 inject 获取 modalManager 实例，并定义 openModal 函数，用于打开模态框。

第三部分：代码解释与细节优化

现在，让我们来仔细分析一下代码，并讨论一些细节优化。

1. ModalManager 的作用

ModalManager 是整个系统的核心，它负责管理模态框的状态。open 方法将模态框的信息（组件、props 等）添加到 modals 数组中，close 方法则从数组中移除指定的模态框。

2. ModalProvider 的作用

ModalProvider 负责将 modalManager 实例提供给整个应用，并使用 Teleport 将模态框渲染到 body 下。Teleport 可以有效地避免模态框被父组件的样式所影响。

3. transition-group 的作用

transition-group 用于为模态框添加动画效果。当模态框显示或隐藏时，transition-group 会自动添加 CSS 类名，我们可以使用这些类名来定义动画效果。

4. 唯一 ID 的重要性

每个模态框都应该有一个唯一的 ID。这个 ID 用于在 close 方法中查找要关闭的模态框。可以使用 uuid 库来生成唯一的 ID。

import { v4 as uuidv4 } from 'uuid';

// 在 open 方法中生成唯一的 ID
modalManager.open({
  id: uuidv4(), // 生成唯一的 ID
  component: MyModal,
  props: {
    title: '我的模态框',
    content: '这是一个测试模态框。',
  },
});

5. 动态组件的使用

ModalProvider 中使用了 <component :is="modal.component" ... /> 语法，这是一个动态组件。它可以根据 modal.component 的值动态地渲染不同的组件。

6. 全局样式控制

在 ModalProvider 的 mounted 和 beforeUnmount 钩子中，我们添加/移除了 modal-open class。这个 class 可以用来控制全局样式，例如禁用滚动条。

body.modal-open {
  overflow: hidden;
}

7. 避免内存泄漏

当模态框关闭时，应该确保将其从 modals 数组中移除，以避免内存泄漏。

第四部分：扩展性与高级用法

我们的模态框管理器已经基本可用了，但为了使其更加灵活和可扩展，我们可以添加一些高级功能。

1. 自定义模态框样式

为了方便自定义模态框的样式，我们可以提供一个全局的样式配置选项。

// ModalManager.js
class ModalManager {
  constructor(options = {}) {
    this.modals = reactive([]);
    this.options = reactive({
      style: {
        // 默认样式
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '5px',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
      },
      ...options.style, // 允许用户覆盖默认样式
    });
  }

  // ...
}

export default new ModalManager({
  style: {
    // 全局样式配置
    backgroundColor: '#f0f0f0',
  },
});

然后在模态框组件中使用这个全局样式：

// MyModal.vue
<template>
  <div class="my-modal" :style="modalStyle">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
import { inject, computed } from 'vue';

export default {
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    content: {
      type: String,
      default: '默认内容',
    },
  },
  setup() {
    const modalManager = inject('modalManager');
    const modalStyle = computed(() => modalManager.options.style);

    return {
      modalStyle,
    };
  },
};
</script>

2. 异步模态框

有时候，我们需要在模态框显示之前加载一些数据。可以使用 async/await 来实现异步模态框。

// ModalManager.js
class ModalManager {
  async open(modalOptions) {
    if (modalOptions.beforeOpen) {
      await modalOptions.beforeOpen(); // 在模态框显示之前执行异步操作
    }
    this.modals.push(modalOptions);
  }
}

// App.vue
const openModal = async () => {
  modalManager.open({
    id: 'my-modal',
    component: MyModal,
    props: {
      title: '我的模态框',
      content: '这是一个测试模态框。',
    },
    async beforeOpen() {
      // 模拟异步加载数据
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('数据加载完成！');
    },
  });
};

3. 模态框返回值

有时候，我们需要在模态框关闭时返回一些数据。可以使用 Promise 来实现模态框返回值。

// ModalManager.js
class ModalManager {
  open(modalOptions) {
    return new Promise((resolve, reject) => {
      modalOptions.resolve = resolve; // 保存 resolve 函数
      modalOptions.reject = reject;   // 保存 reject 函数
      this.modals.push(modalOptions);
    });
  }

  close(modalId, result) {
    const index = this.modals.findIndex(modal => modal.id === modalId);
    if (index !== -1) {
      const modal = this.modals[index];
      this.modals.splice(index, 1);
      modal.resolve(result); // 调用 resolve 函数，返回结果
    }
  }
}

// MyModal.vue
<template>
  <div class="my-modal">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <button @click="onConfirm">确认</button>
    <button @click="$emit('close')">取消</button>
  </div>
</template>

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

export default {
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    content: {
      type: String,
      default: '默认内容',
    },
  },
  setup(props, { emit }) {
    const modalManager = inject('modalManager');

    const onConfirm = () => {
      modalManager.close(props.id, '用户点击了确认按钮'); // 返回结果
    };

    return {
      onConfirm,
    };
  },
};
</script>

// App.vue
const openModal = async () => {
  const result = await modalManager.open({
    id: 'my-modal',
    component: MyModal,
    props: {
      title: '我的模态框',
      content: '这是一个测试模态框。',
    },
  });
  console.log('模态框返回值：', result);
};

总结

今天，我们学习了如何使用 Vue 的 provide/inject 和 Teleport，设计一个可扩展的全局模态框管理器。我们从需求分析开始，逐步实现了核心代码，并讨论了一些细节优化和高级用法。希望今天的讲座能够帮助你更好地理解 Vue 的组件化思想，并能够灵活地运用这些技术来解决实际问题。

最后，记住一点：好的代码就像一杯好茶，入口清香，回味无穷。希望大家都能写出优雅、易维护的代码！ 感谢大家的收看，我们下期再见！

代码清单

为了方便大家查阅，这里提供完整的代码清单：

文件名	内容