fix: (Sticky) 只能针对浏览器窗口进行定位(#1087) (#1103)

* fix: (Sticky) 只能针对浏览器窗口进行定位(#1087) * fix: 升级@vueuse/core，并改正误引入和升级后的异常 * fix: 修复sticky.vue中的eslint错误
Tencent · Sep 19, 2023 · 2f3a36c · 2f3a36c
1 parent fcab982
commit 2f3a36c
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "@babel/runtime": "^7.16.5",
     "@types/lodash": "^4.14.178",
     "@types/validator": "^13.6.3",
-    "@vueuse/core": "^8.2.5",
+    "@vueuse/core": "^10.4.1",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
     "tdesign-icons-vue-next": "^0.2.0",

diff --git a/src/message/message.vue b/src/message/message.vue
@@ -38,7 +38,7 @@ import {
   onMounted,
 } from 'vue';
 import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-vue-next';
-import { isObject, isString } from '@vueuse/core';
+import { isObject, isString } from 'lodash';
 
 import Link from '../link';
 import messageProps from './props';

diff --git a/src/pull-down-refresh/__test__/utils.ts b/src/pull-down-refresh/__test__/utils.ts
@@ -79,7 +79,11 @@ export class MockResizeObserver {
   }
 
   disconnect() {
-    this._element.removeEventListener('resize', this.trigger);
+    // unmount后监听的元素this._element可能为null，因此先判断元素是否为null，再依据此来是否执行removeEventListener
+    if (this._element) {
+      this._element.removeEventListener('resize', this.trigger);
+    }
+    this._element = null;
   }
 
   /**

diff --git a/src/shared/util.ts b/src/shared/util.ts
@@ -1,4 +1,4 @@
-import { isNumber } from '@vueuse/core';
+import isNumber from 'lodash/isNumber';
 import config from '../config';
 
 const { prefix } = config;

diff --git a/src/sticky/sticky.vue b/src/sticky/sticky.vue
@@ -25,9 +25,9 @@ export default defineComponent({
 
     // box 用于占位和记录边界
     // content 用于实际定位
-    const boxRef = templateRef('boxRef');
+    const boxRef = templateRef<HTMLElement | null>('boxRef', null);
     const { top: boxTop } = useElementBounding(boxRef);
-    const contentRef = templateRef('contentRef');
+    const contentRef = templateRef<HTMLElement | null>('contentRef', null);
     const { top: contentTop, height } = useElementBounding(contentRef);
 
     const boxStyles = computed(() => `height:${height.value}px;`);