创建全局的modal

在应用创建的过程中，可能在不同的页面会遇到不同的 modal，如何整理这种类似的需求，我们可以对通用的逻辑进行抽离，用 key 值来界定不同的modal。对不同页面上的 modal 进行控制的时候，我们可以传入不同的参数来达到分别控制的效果。

import { readonly, ref } from 'vue';
export interface IModal {
  name: string;
  visible: boolean;
}
// 全局单例，放到最外层
const modals = ref<IModal[]>([]);
export default function useModal() {
  const registerModal = (name: string) => {
    modals.value.push({
      name,
      visible: false,
    } as IModal);
  };
  const findModal = (name: string): IModal | undefined => modals.value.find((m) => m.name === name);
  const isModalVisible = (name: string) => {
    const m = findModal(name);
    return m ? m.visible : undefined;
  };
  const showModal = (name: string) => {
    const m = findModal(name);
    if (m) m.visible = true;
  };
  const hideModal = (name: string) => {
    const m = findModal(name);
    if (m) m.visible = false;
  };
  const toggleModal = (name: string) => {
    const m = findModal(name);
    if (m) m.visible = !m.visible;
  };
  return {
    modals: readonly(modals),
    registerModal,
    isModalVisible,
    showModal,
    hideModal,
    toggleModal,
  };
}

通过以上的 composable 函数封装，我们就可以在不同的页面调用 useModal 对该页面上的 modal 进行注册之后进行单独的控制。