import { ref } from 'vue' import { isBoolean, isEmptyVariableInDefault, isPromise, } from '../../../../utils' import type { ModalOptions } from '../modal' export const useModal = () => { const openModal = ref(false) // 弹框标题 const title = ref['title']>('') // 弹框内容 const content = ref['content']>('') // 是否显示取消按钮 const showCancel = ref['showCancel']>(false) // 取消按钮的文字 const cancelText = ref['cancelText']>('') // 取消按钮的样式 const cancelStyle = ref['cancelStyle']>({}) // 确认按钮的文字 const confirmText = ref['confirmText']>('') // 确认按钮的样式 const confirmStyle = ref['confirmStyle']>({}) // 是否显示遮罩 const mask = ref['mask']>(true) // 是否允许点击遮罩关闭 const maskClosable = ref['maskClosable']>(false) // 点击取消按钮触发的回调函数 const cancelFunc = ref(undefined) // 点击确认按钮触发的回调函数 const confirmFunc = ref(undefined) // 打开弹窗 const showModal = (options: ModalOptions) => { openModal.value = true title.value = isEmptyVariableInDefault(options.title, '') content.value = options.content showCancel.value = isEmptyVariableInDefault(options?.showCancel, false) cancelText.value = isEmptyVariableInDefault(options?.cancelText, '取 消') cancelStyle.value = isEmptyVariableInDefault(options?.cancelStyle, {}) confirmText.value = isEmptyVariableInDefault(options?.confirmText, '确 认') confirmStyle.value = isEmptyVariableInDefault(options?.confirmStyle, {}) mask.value = isEmptyVariableInDefault(options?.mask, true) maskClosable.value = isEmptyVariableInDefault(options?.maskClosable, false) cancelFunc.value = options?.cancel confirmFunc.value = options?.confirm } // 关闭弹窗 const closeModal = () => { openModal.value = false } // 点击取消按钮 const clickCancel = () => { if (!cancelFunc.value) { closeModal() return } const func = cancelFunc.value() const isPromiseOrBool = [isPromise(func), isBoolean(func)].includes(true) if (!isPromiseOrBool) { // 传递的是普通函数 closeModal() return } if (isPromise(func)) { func .then((res) => { if (res) closeModal() }) .catch((err) => { // eslint-disable-next-line no-console console.warn(`[TnModal] some error occured: ${err}`) }) } else if (func) { closeModal() } } // 点击确认按钮 const clickConfirm = () => { if (!confirmFunc.value) { closeModal() return } const func = confirmFunc.value() const isPromiseOrBool = [isPromise(func), isBoolean(func)].includes(true) if (!isPromiseOrBool) { // 传递的是普通函数 closeModal() return } if (isPromise(func)) { func .then((res) => { if (res) closeModal() }) .catch((err) => { // eslint-disable-next-line no-console console.warn(`[TnModal] some error occured: ${err}`) }) } else if (func) { closeModal() } } return { openModal, showModal, title, content, showCancel, cancelText, cancelStyle, confirmText, confirmStyle, mask, maskClosable, cancelFunc, confirmFunc, clickCancel, clickConfirm, } }