MTP2.0_WEB/src/common/setup/modal/modal.ts

import { ModalName } from '@/common/constants/modalName';
import { inject, provide, ref, watchEffect } from 'vue';

// 控制弹窗


/**
 * 控制关闭弹窗
 * @param modelName 相对应的弹窗组件名
 * @returns 
 */
export function closeModal(modelName: keyof ModalName) {
    // 控制弹窗 flag
    const visible = ref<boolean>(false);
    const show = inject(modelName, ref<boolean>(false))
    watchEffect(() => {
        visible.value = show.value
    })
    /**
     * 取消弹窗
     */
    function cancel() {
        visible.value = false;
        show.value = false
    }
    return { visible, cancel }
}

/**
 * 控制打开弹窗
 * @param modelName 相对应的弹窗组件名
 * @returns openAction 打开弹窗方法
 */
export function openModal(modelName: keyof ModalName) {
    const name = ref<boolean>(false)
    provide(modelName, name);
    /**
     * 打开弹窗
     * @param value 弹窗名
     */
    function openAction() {
        console.log('弹窗组件名', modelName);
        name.value = true;
    }
    return { openAction }
}

export type { ModalName };