import { U_MODAL_EVENT_SHOW, U_MODAL_EVENT_HIDE, U_MODAL_EVENT_CLEAR_LOADING, U_MODAL_GLOBAL_EVENT_SHOW, U_MODAL_GLOBAL_EVENT_HIDE, U_MODAL_GLOBAL_EVENT_CLEAR_LOADING, getEventWithCurrentPage, type ModalPayload } from '../../components/u-modal/service'; export type UseModalShowOptions = ModalPayload; export type UseModal = { /** * 显示 modal * - show('标题') * - show({ title, content, showCancelButton, ... }) */ show: (contentOrOptions: string | UseModalShowOptions) => void; /** * 显示 confirm 类型的 modal(带确认和取消按钮) * - confirm('标题') * - confirm({ title, content, onConfirm, onCancel }) */ confirm: (contentOrOptions: string | UseModalShowOptions) => void; /** 关闭 modal */ close: () => void; /** 清除 loading 状态 */ clearLoading: () => void; }; export type UseModalOptions = { /** 是否使用全局根部 */ global?: boolean; /** 是否使用页面级 或某个页面的 */ page?: boolean | string; }; function normalize(contentOrOptions: string | UseModalShowOptions): UseModalShowOptions { if (typeof contentOrOptions === 'string') { // 如果是简单的字符串,可能是标题或内容 return { content: contentOrOptions }; } return contentOrOptions || {}; } function getPage(optionsOrGlobal: UseModalOptions | boolean): string { if (typeof optionsOrGlobal === 'boolean') { return ''; } if (optionsOrGlobal.page && typeof optionsOrGlobal.page === 'string' && optionsOrGlobal.page !== '') { return optionsOrGlobal.page; } return ''; } /** * Modal 函数式调用 * @description 需要页面/应用中至少存在一个 实例用于承接事件;不影响原 ref 调用方式。 * * 支持两种调用方式: * - 应用级 useModal() / useModal(true) / useModal({ global: true }) * - 页面级 useModal(false) / useModal({ page: true }) / useModal({ page: 'pageId' }) (pageId 应和页面中 的 page 属性一致) */ export function useModal(optionsOrGlobal: UseModalOptions | boolean = true): UseModal { const isGlobal = typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal === true : !!optionsOrGlobal.global; const isPage = typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal === false : !!optionsOrGlobal.page; const showEvent = isGlobal ? U_MODAL_GLOBAL_EVENT_SHOW : isPage ? getEventWithCurrentPage(U_MODAL_EVENT_SHOW, getPage(optionsOrGlobal)) : ''; const hideEvent = isGlobal ? U_MODAL_GLOBAL_EVENT_HIDE : isPage ? getEventWithCurrentPage(U_MODAL_EVENT_HIDE, getPage(optionsOrGlobal)) : ''; const clearLoadingEvent = isGlobal ? U_MODAL_GLOBAL_EVENT_CLEAR_LOADING : isPage ? getEventWithCurrentPage(U_MODAL_EVENT_CLEAR_LOADING, getPage(optionsOrGlobal)) : ''; function emitShow(payload: UseModalShowOptions) { if (showEvent) { uni?.$emit && uni.$emit(showEvent, payload); } } function emitHide() { if (hideEvent) { uni?.$emit && uni.$emit(hideEvent); } } function emitClearLoading() { if (clearLoadingEvent) { uni?.$emit && uni.$emit(clearLoadingEvent); } } function show(contentOrOptions: string | UseModalShowOptions) { emitShow(normalize(contentOrOptions)); } function confirm(contentOrOptions: string | UseModalShowOptions) { const options = normalize(contentOrOptions); emitShow({ ...options, showCancelButton: options.showCancelButton ?? true, showConfirmButton: options.showConfirmButton ?? true }); } function clearLoading() { emitClearLoading(); } function close() { emitHide(); } return { show, confirm, close, clearLoading }; }