mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
fix(projects): 修复面包屑数据
This commit is contained in:
@ -1,34 +1,69 @@
|
||||
import { watch, onUnmounted } from 'vue';
|
||||
import { computed, watch, onUnmounted } from 'vue';
|
||||
import type { ComputedRef } from 'vue';
|
||||
import useBoolean from './useBoolean';
|
||||
|
||||
interface ScrollBodyStyle {
|
||||
overflow: string;
|
||||
paddingRight: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用弹窗
|
||||
* @param hide - 关闭html滚动条
|
||||
* @param hideScroll - 关闭html滚动条
|
||||
* @param duration - 显示滚动条的延迟时间
|
||||
*/
|
||||
export default function useModalVisible(hideScroll = true) {
|
||||
export default function useModalVisible(hideScroll = true, duration = 300) {
|
||||
const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
|
||||
|
||||
const stopHandle = watch(visible, async newValue => {
|
||||
const defaultStyle: ScrollBodyStyle = {
|
||||
overflow: '',
|
||||
paddingRight: ''
|
||||
};
|
||||
function getInitBodyStyle() {
|
||||
if (hideScroll) {
|
||||
const className = 'overflow-hidden';
|
||||
if (newValue) {
|
||||
document.body.classList.add(className);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove(className);
|
||||
}, 300);
|
||||
}
|
||||
const { overflow, paddingRight } = document.body.style;
|
||||
Object.assign(defaultStyle, { overflow, paddingRight });
|
||||
}
|
||||
});
|
||||
}
|
||||
function setScrollBodyStyle() {
|
||||
document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
function resetScrollBodyStyle() {
|
||||
document.body.style.overflow = defaultStyle.overflow;
|
||||
document.body.style.paddingRight = defaultStyle.paddingRight;
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
function modalVisibleWatcher(visible: ComputedRef<boolean>) {
|
||||
const stopHandle = watch(visible, async newValue => {
|
||||
if (hideScroll) {
|
||||
if (newValue) {
|
||||
setScrollBodyStyle();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
resetScrollBodyStyle();
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
getInitBodyStyle();
|
||||
modalVisibleWatcher(computed(() => visible.value));
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
visible,
|
||||
openModal,
|
||||
closeModal,
|
||||
toggleModal
|
||||
toggleModal,
|
||||
modalVisibleWatcher
|
||||
};
|
||||
}
|
||||
|
Reference in New Issue
Block a user