ll-plus 2.5.6 → 2.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -31,7 +31,7 @@ function useScroll() {
31
31
  () => {
32
32
  if (scrollRef.value) {
33
33
  if (!observer) {
34
- const observer2 = new ResizeObserver(() => {
34
+ observer = new ResizeObserver(() => {
35
35
  if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
36
36
  isHasScrollBar.value = true;
37
37
  } else {
@@ -39,7 +39,7 @@ function useScroll() {
39
39
  }
40
40
  });
41
41
  scrollRef.value.addEventListener("scroll", handleScroll);
42
- observer2.observe(scrollRef.value);
42
+ observer.observe(scrollRef.value);
43
43
  }
44
44
  }
45
45
  },
@@ -1 +1 @@
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 // console.log(mutations, 'mutations')\n // mutations.forEach(function () {\n // console.log(scrollRef.value!.scrollHeight)\n // console.log(scrollRef.value!.offsetHeight)\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 // console.log(observer, 'observer')\n // // 配置MutationObserver,监听子节点的变化\n // const config = {\n // childList: true, // 观察直接子节点\n // subtree: true // 及其更低的后代节点\n // }\n // // 开始监听容器的变化\n // observer.observe(scrollRef.value!, config)\n // }\n if (!observer) {\n const observer = new ResizeObserver(() => {\n // 检查容器的高度变化\n if (scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n })\n scrollRef.value!.addEventListener('scroll', handleScroll)\n observer.observe(scrollRef.value)\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":["observer"],"mappings":";;;AAQO,SAAS,SAAY,GAAA;AAC1B,EAAA,MAAM,YAAY,GAAiB,EAAA,CAAA;AACnC,EAAA,MAAM,iBAAiB,GAAqB,EAAA,CAAA;AAC5C,EAAM,MAAA,cAAA,GAAiB,IAAI,KAAK,CAAA,CAAA;AAChC,EAAI,IAAA,QAAA,CAAA;AAIJ,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiB,KAAA;AACrC,IAAA,MAAM,SAAS,KAAM,CAAA,MAAA,CAAA;AACrB,IAAA,iBAAA,CAAkB,MAAM,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,MAAwB,KAAA;AAEjD,IAAI,IAAA,MAAA,CAAO,YAAe,GAAA,MAAA,CAAO,YAAc,EAAA;AAC7C,MAAA,cAAA,CAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,KACzB;AACA,IAAI,IAAA,CAAC,CAAC,MAAA,CAAO,SAAW,EAAA;AAEtB,MAAA,IAAI,OAAO,SAAY,GAAA,MAAA,CAAO,YAAgB,IAAA,MAAA,CAAO,eAAe,CAAG,EAAA;AAErE,QAAA,cAAA,CAAe,KAAQ,GAAA,QAAA,CAAA;AAAA,OAClB,MAAA;AAEL,QAAA,cAAA,CAAe,KAAQ,GAAA,WAAA,CAAA;AAAA,OACzB;AAAA,KACK,MAAA;AAEL,MAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAyCA,EAAA,KAAA;AAAA,IACE,SAAA;AAAA,IACA,MAAM;AACJ,MAAA,IAAI,UAAU,KAAO,EAAA;AAyBnB,QAAA,IAAI,CAAC,QAAU,EAAA;AACb,UAAMA,MAAAA,SAAAA,GAAW,IAAI,cAAA,CAAe,MAAM;AAExC,YAAA,IAAI,SAAU,CAAA,KAAA,CAAO,YAAe,GAAA,SAAA,CAAU,MAAO,YAAc,EAAA;AACjE,cAAA,cAAA,CAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,aAClB,MAAA;AACL,cAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,aACzB;AAAA,WACD,CAAA,CAAA;AACD,UAAU,SAAA,CAAA,KAAA,CAAO,gBAAiB,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AACxD,UAAAA,SAAAA,CAAS,OAAQ,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SAClC;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,SAAW,EAAA,IAAA;AAAA,MACX,IAAM,EAAA,IAAA;AAAA,KACR;AAAA,GACF,CAAA;AAaA,EAAA,WAAA,CAAY,MAAM;AAChB,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,KACtB;AAAA,GACD,CAAA,CAAA;AAUD,EAAO,OAAA,EAAE,SAAW,EAAA,cAAA,EAAgB,cAAe,EAAA,CAAA;AACrD;;;;"}
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' // 滚动到最顶部、滚动中、滚动到最底部\n\nexport function useScroll() {\n const scrollRef = ref<HTMLElement>() // 监听滚动的dom\n const scrollPosition = ref<IScrollPosition>() // 滚动到的位置\n const isHasScrollBar = ref(false) // 是否有滚动条\n let observer: ResizeObserver // 监听dom内容发生变化\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 // 监听滚动容器高度的变化\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n if (!observer) {\n observer = new ResizeObserver(() => {\n // 检查容器的高度变化\n if (scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n })\n scrollRef.value!.addEventListener('scroll', handleScroll)\n observer.observe(scrollRef.value)\n }\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n // 组件卸载停止监听\n onUnmounted(() => {\n if (observer) {\n observer.disconnect()\n }\n })\n\n return { scrollRef, isHasScrollBar, scrollPosition }\n}\n"],"names":[],"mappings":";;;AASO,SAAS,SAAY,GAAA;AAC1B,EAAA,MAAM,YAAY,GAAiB,EAAA,CAAA;AACnC,EAAA,MAAM,iBAAiB,GAAqB,EAAA,CAAA;AAC5C,EAAM,MAAA,cAAA,GAAiB,IAAI,KAAK,CAAA,CAAA;AAChC,EAAI,IAAA,QAAA,CAAA;AAGJ,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiB,KAAA;AACrC,IAAA,MAAM,SAAS,KAAM,CAAA,MAAA,CAAA;AACrB,IAAA,iBAAA,CAAkB,MAAM,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,MAAwB,KAAA;AAEjD,IAAI,IAAA,MAAA,CAAO,YAAe,GAAA,MAAA,CAAO,YAAc,EAAA;AAC7C,MAAA,cAAA,CAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,KACzB;AACA,IAAI,IAAA,CAAC,CAAC,MAAA,CAAO,SAAW,EAAA;AAEtB,MAAA,IAAI,OAAO,SAAY,GAAA,MAAA,CAAO,YAAgB,IAAA,MAAA,CAAO,eAAe,CAAG,EAAA;AAErE,QAAA,cAAA,CAAe,KAAQ,GAAA,QAAA,CAAA;AAAA,OAClB,MAAA;AAEL,QAAA,cAAA,CAAe,KAAQ,GAAA,WAAA,CAAA;AAAA,OACzB;AAAA,KACK,MAAA;AAEL,MAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAGA,EAAA,KAAA;AAAA,IACE,SAAA;AAAA,IACA,MAAM;AACJ,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAA,IAAI,CAAC,QAAU,EAAA;AACb,UAAW,QAAA,GAAA,IAAI,eAAe,MAAM;AAElC,YAAA,IAAI,SAAU,CAAA,KAAA,CAAO,YAAe,GAAA,SAAA,CAAU,MAAO,YAAc,EAAA;AACjE,cAAA,cAAA,CAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,aAClB,MAAA;AACL,cAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,aACzB;AAAA,WACD,CAAA,CAAA;AACD,UAAU,SAAA,CAAA,KAAA,CAAO,gBAAiB,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AACxD,UAAS,QAAA,CAAA,OAAA,CAAQ,UAAU,KAAK,CAAA,CAAA;AAAA,SAClC;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,SAAW,EAAA,IAAA;AAAA,MACX,IAAM,EAAA,IAAA;AAAA,KACR;AAAA,GACF,CAAA;AAGA,EAAA,WAAA,CAAY,MAAM;AAChB,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,KACtB;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA,EAAE,SAAW,EAAA,cAAA,EAAgB,cAAe,EAAA,CAAA;AACrD;;;;"}
package/index.full.js CHANGED
@@ -5377,6 +5377,7 @@
5377
5377
  const scrollRef = require$$0.ref();
5378
5378
  const scrollPosition = require$$0.ref();
5379
5379
  const isHasScrollBar = require$$0.ref(false);
5380
+ let observer;
5380
5381
  const handleScroll = (event) => {
5381
5382
  const target = event.target;
5382
5383
  getSrcollPosition(target);
@@ -5401,8 +5402,8 @@
5401
5402
  scrollRef,
5402
5403
  () => {
5403
5404
  if (scrollRef.value) {
5404
- {
5405
- const observer2 = new ResizeObserver(() => {
5405
+ if (!observer) {
5406
+ observer = new ResizeObserver(() => {
5406
5407
  if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
5407
5408
  isHasScrollBar.value = true;
5408
5409
  } else {
@@ -5410,7 +5411,7 @@
5410
5411
  }
5411
5412
  });
5412
5413
  scrollRef.value.addEventListener("scroll", handleScroll);
5413
- observer2.observe(scrollRef.value);
5414
+ observer.observe(scrollRef.value);
5414
5415
  }
5415
5416
  }
5416
5417
  },
@@ -5420,6 +5421,9 @@
5420
5421
  }
5421
5422
  );
5422
5423
  require$$0.onUnmounted(() => {
5424
+ if (observer) {
5425
+ observer.disconnect();
5426
+ }
5423
5427
  });
5424
5428
  return { scrollRef, isHasScrollBar, scrollPosition };
5425
5429
  }