sinter-compositions/src/user/modal.ts

vue3 composition 工具库

import {reactive, watch} from 'vue'

type Prop = {
    visible: boolean,
    hiddenModal: boolean,
    closeOnClickModal: boolean
    destroyContainer: boolean
}


export const ModalCommonProp = {
    visible: Boolean,
    hiddenModal: Boolean,
    closeOnClickModal: {
        type: Boolean,
        default: true
    },
    destroyContainer: {
        type: Boolean,
        default: true
    },
}

export function useModal(props: Prop, emit: Function) {
    const state = reactive({
        rendered: false,
        visible: false
    });

    setTimeout(() => {
        state.visible = props.visible;
    });

    function isDestroyed() {
        if (props.destroyContainer) return props.visible;
        else return state.rendered;
    }

    function handleCloseModal() {
        if (props.closeOnClickModal) {
            state.visible = false;
        }
    }

    watch(() => props.visible, (v: boolean) => {
        state.visible = v;
    });
    watch(() => state.visible, (v: boolean) => {
        if (v) {
            state.rendered = true;
        }
        if (props.visible !== v) {
            emit("update:visible");
        }
    });

    const context = {
        isDestroyed,
        handleCloseModal,
    }
    return [state, context] as [typeof state, typeof context]

}