ruoyi-plus-soybean/src/hooks/common/useModalVisible.ts

34 lines
737 B
TypeScript

import { watch, onUnmounted } from 'vue';
import useBoolean from './useBoolean';
import useBodyScroll from './useBodyScroll';
/**
* 使用弹窗
* @param hideScroll - 关闭html滚动条
*/
export default function useModalVisible(hideScroll = true) {
const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
const { scrollBodyHandler } = useBodyScroll();
function modalVisibleWatcher() {
const stopHandle = watch(visible, async (newValue) => {
scrollBodyHandler(newValue);
});
onUnmounted(() => {
stopHandle();
});
}
if (hideScroll) {
modalVisibleWatcher();
}
return {
visible,
openModal,
closeModal,
toggleModal,
};
}