fix(projects): 修复面包屑数据

This commit is contained in:
Soybean
2022-01-14 14:17:34 +08:00
parent 839b82ba8b
commit 28b5d22401
6 changed files with 193 additions and 132 deletions

View File

@ -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
};
}