@arco-design/web-vue
Version:
Arco Design Vue 2.0: A Vue.js 3 UI Library
42 lines (41 loc) • 1.63 kB
JavaScript
;
var vue = require("vue");
function usePopupOverflowHidden(props) {
const { container, hidden } = vue.toRefs(props);
let needResetContainerStyle = false;
let originContainerStyle = {};
const getScrollBarWidth = (element) => {
return element.tagName === "BODY" ? window.innerWidth - (document.body.clientWidth || document.documentElement.clientWidth) : element.offsetWidth - element.clientWidth;
};
const setContainerStyle = () => {
if (container.value && container.value.style.overflow !== "hidden") {
const originStyle = container.value.style;
needResetContainerStyle = true;
const containerScrollBarWidth = getScrollBarWidth(container.value);
if (containerScrollBarWidth) {
originContainerStyle.width = originStyle.width;
container.value.style.width = `calc(${container.value.style.width || "100%"} - ${containerScrollBarWidth}px)`;
}
originContainerStyle.overflow = originStyle.overflow;
container.value.style.overflow = "hidden";
}
};
const resetContainerStyle = () => {
if (container.value && needResetContainerStyle) {
const originStyle = originContainerStyle;
Object.keys(originStyle).forEach((i) => {
container.value.style[i] = originStyle[i];
});
}
needResetContainerStyle = false;
originContainerStyle = {};
};
vue.watchEffect((onInvalidate) => {
hidden.value ? setContainerStyle() : resetContainerStyle();
onInvalidate(() => {
resetContainerStyle();
});
});
return [resetContainerStyle, setContainerStyle];
}
module.exports = usePopupOverflowHidden;