ll-plus 2.4.17 → 2.4.19

package/es/packages/hooks/use-scroll/index.mjs

@@ -0,0 +1,113 @@
+import { ref, watch, onUnmounted } from 'vue';
+
+"use strict";
+function useScroll() {
+  const scrollRef = ref();
+  const scrollPosition = ref();
+  const isHasScrollBar = ref(false);
+  let observer;
+  let timer;
+  const handleScroll = (event) => {
+    const target = event.target;
+    getSrcollPosition(target);
+  };
+  const getSrcollPosition = (target) => {
+    if (target.scrollHeight > target.offsetHeight) {
+      isHasScrollBar.value = true;
+    } else {
+      isHasScrollBar.value = false;
+    }
+    if (!!target.scrollTop) {
+      if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 1) {
+        scrollPosition.value = "bottom";
+      } else {
+        scrollPosition.value = "scrolling";
+      }
+    } else {
+      scrollPosition.value = "top";
+    }
+  };
+  watch(
+    scrollRef,
+    () => {
+      if (scrollRef.value) {
+        timer = setTimeout(() => {
+          if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
+            isHasScrollBar.value = true;
+          }
+        }, 10);
+        scrollRef.value.addEventListener("scroll", handleScroll);
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  const handleWindowResize = () => {
+    getSrcollPosition(scrollRef.value);
+  };
+  watch(
+    scrollRef,
+    () => {
+      if (scrollRef.value) {
+        window.addEventListener("resize", handleWindowResize);
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  watch(
+    scrollRef,
+    () => {
+      if (scrollRef.value) {
+        if (!observer) {
+          observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function() {
+              if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
+                isHasScrollBar.value = true;
+              }
+              scrollRef.value.addEventListener("scroll", handleScroll);
+            });
+          });
+          const config = {
+            childList: true,
+            // 观察直接子节点
+            subtree: true
+            // 及其更低的后代节点
+          };
+          observer.observe(scrollRef.value, config);
+        }
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  onUnmounted(() => {
+    if (scrollRef.value) {
+      scrollRef.value?.removeEventListener("scroll", handleScroll);
+    }
+  });
+  onUnmounted(() => {
+    window.removeEventListener("resize", handleWindowResize);
+  });
+  onUnmounted(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  });
+  return { scrollRef, isHasScrollBar, scrollPosition };
+}
+
+export { useScroll };
+//# sourceMappingURL=index.mjs.map

package/es/packages/hooks/use-scroll/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-scroll/index.ts"],"sourcesContent":["/**\n * @description: 用于监听滚动行为/window的resize监听/滚动区域内的dom动态增删dom来添加阴影\n * @return {HTMLElement} elementRef 要滚动监听的dom\n * @return {scrollPosition} IScrollPosition 监听的位置\n */\nimport { onUnmounted, ref, watch } from 'vue'\n\ntype IScrollPosition = 'top' | 'scrolling' | 'bottom' // 滚动到最顶部、滚动中、滚动到最底部\nexport function useScroll() {\n  const scrollRef = ref<HTMLElement>() // 监听滚动的dom\n  const scrollPosition = ref<IScrollPosition>() // 滚动到的位置\n  const isHasScrollBar = ref(false) // 是否有滚动条\n  let observer: MutationObserver // 监听dom内容发生变化\n  let timer\n\n  // 滚动事件\n  const handleScroll = (event: Event) => {\n    const target = event.target as HTMLElement\n    getSrcollPosition(target)\n  }\n  // 判断滚动位置\n  const getSrcollPosition = (target: HTMLElement) => {\n    // 判断是否有滚动体条\n    if (target.scrollHeight > target.offsetHeight) {\n      isHasScrollBar.value = true\n    } else {\n      isHasScrollBar.value = false\n    }\n    if (!!target.scrollTop) {\n      // 有0.5px的误差 故-1\n      if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 1) {\n        // 在最底部\n        scrollPosition.value = 'bottom'\n      } else {\n        // 滚动中\n        scrollPosition.value = 'scrolling'\n      }\n    } else {\n      // 在最顶部\n      scrollPosition.value = 'top'\n    }\n  }\n\n  // dom挂载完成的监听滚动事件\n  watch(\n    scrollRef,\n    () => {\n      if (scrollRef.value) {\n        // 防止子元素没有加载出来没有高度\n        timer = setTimeout(() => {\n          if (scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight) {\n            isHasScrollBar.value = true\n          }\n        }, 10)\n        scrollRef.value.addEventListener('scroll', handleScroll)\n      }\n    },\n    {\n      immediate: true,\n      deep: true\n    }\n  )\n\n  // 监听window的resize事件\n  const handleWindowResize = () => {\n    getSrcollPosition(scrollRef.value!)\n  }\n  // 监听window的resize\n  watch(\n    scrollRef,\n    () => {\n      if (scrollRef.value) {\n        window.addEventListener('resize', handleWindowResize)\n      }\n    },\n    {\n      immediate: true,\n      deep: true\n    }\n  )\n\n  // 监视对 DOM 树所做更改的能力（对dom增删改等）\n  watch(\n    scrollRef,\n    () => {\n      if (scrollRef.value) {\n        if (!observer) {\n          observer = new MutationObserver(function (mutations) {\n            mutations.forEach(function () {\n              // 检查容器的高度变化\n              if (\n                scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight\n              ) {\n                isHasScrollBar.value = true\n              }\n              scrollRef.value!.addEventListener('scroll', handleScroll)\n            })\n          })\n          // 配置MutationObserver，监听子节点的变化\n          const config = {\n            childList: true, // 观察直接子节点\n            subtree: true // 及其更低的后代节点\n          }\n          // 开始监听容器的变化\n          observer.observe(scrollRef.value!, config)\n        }\n      }\n    },\n    {\n      immediate: true,\n      deep: true\n    }\n  )\n\n  // 卸载滚动事件\n  onUnmounted(() => {\n    if (scrollRef.value) {\n      scrollRef.value?.removeEventListener('scroll', handleScroll)\n    }\n  })\n  // 卸载停止resize\n  onUnmounted(() => {\n    window.removeEventListener('resize', handleWindowResize)\n  })\n  // 组件卸载停止监听\n  onUnmounted(() => {\n    if (observer) {\n      observer.disconnect()\n    }\n  })\n\n  // 清空定时器\n  onUnmounted(() => {\n    if (timer) {\n      clearTimeout(timer)\n      timer = null\n    }\n  })\n\n  return { scrollRef, isHasScrollBar, scrollPosition }\n}\n"],"names":[],"mappings":"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"}