ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 5.23 kB
Source Map (JSON)
{"version":3,"file":"mixins-scrollbar.mjs","sources":["../../../../../src/components/ivue-modal/mixins-scrollbar.ts"],"sourcesContent":["import { ref } from 'vue';\r\nimport { getScrollBarSize } from '../../utils/helpers';\r\nimport { isClient } from '../../utils/helpers';\r\n\r\nexport const scrollbarMixins = ({ lockScroll = true }) => {\r\n // body是否可以滚动\r\n const bodyIsOverflowing = ref<boolean>(false);\r\n\r\n // 滚动条宽度\r\n const scrollBarWidth = ref<number>(0);\r\n\r\n // methods\r\n\r\n // 检查滚动条\r\n const checkScrollBar = () => {\r\n if (!isClient) {\r\n return;\r\n }\r\n\r\n let fullWindowWidth = window.innerWidth;\r\n\r\n // workaround for missing window.innerWidth in IE8\r\n if (!fullWindowWidth) {\r\n // 元素的大小及其相对于视口的位置\r\n const documentElementRect =\r\n document.documentElement.getBoundingClientRect();\r\n\r\n // 视口宽度\r\n fullWindowWidth =\r\n documentElementRect.right - Math.abs(documentElementRect.left);\r\n }\r\n\r\n // body是否有滚动条\r\n bodyIsOverflowing.value = document.body.clientWidth < fullWindowWidth;\r\n\r\n // 有滚动条\r\n if (bodyIsOverflowing.value) {\r\n // 获取滚动条宽度\r\n scrollBarWidth.value = getScrollBarSize();\r\n }\r\n };\r\n\r\n // 检查是否有蒙版\r\n const checkMaskInVisible = () => {\r\n if (!isClient) {\r\n return;\r\n }\r\n\r\n const masks = document.getElementsByClassName('ivue-modal-mask') || [];\r\n\r\n // 是否存在蒙版\r\n return Array.from(masks).every(\r\n (m) => m.style.display === 'none' || m.classList.contains('fade-leave-to')\r\n );\r\n };\r\n\r\n // 重新设置滚动条\r\n const resetScrollBar = () => {\r\n if (!isClient) {\r\n return;\r\n }\r\n\r\n document.body.style.paddingRight = '';\r\n };\r\n\r\n // 设置滚动条\r\n const setScrollBar = () => {\r\n if (!isClient) {\r\n return;\r\n }\r\n\r\n // body可以滚动 有滚动条宽度\r\n if (bodyIsOverflowing.value && scrollBarWidth.value !== undefined) {\r\n document.body.style.paddingRight = `${scrollBarWidth.value}px`;\r\n }\r\n };\r\n\r\n // 添加滚动条\r\n const addScrollEffect = () => {\r\n if (!isClient) {\r\n return;\r\n }\r\n\r\n // 禁止对页面滚动条的修改\r\n if (!lockScroll) {\r\n return;\r\n }\r\n\r\n // 检查滚动条\r\n checkScrollBar();\r\n // 设置滚动条\r\n setScrollBar();\r\n\r\n document.body.style.overflow = 'hidden';\r\n };\r\n\r\n // 删除滚动条修改\r\n const removeScrollEffect = () => {\r\n // 禁止对页面滚动条的修改\r\n if (!lockScroll) {\r\n return;\r\n }\r\n\r\n // 没有蒙版\r\n if (isClient && checkMaskInVisible()) {\r\n // 重新设置 body overflow\r\n document.body.style.overflow = '';\r\n\r\n resetScrollBar();\r\n }\r\n };\r\n\r\n return {\r\n checkScrollBar,\r\n checkMaskInVisible,\r\n resetScrollBar,\r\n setScrollBar,\r\n addScrollEffect,\r\n removeScrollEffect,\r\n };\r\n};\r\n"],"names":[],"mappings":"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"}