fix(utils): useTaroRect 增加异常处理 (#2431)

* fix(utils): useTaroRect 增加异常处理 * fix: update
jd-opensource · Jul 15, 2023 · fa7db51 · fa7db51
1 parent 82bf9e3
commit fa7db51
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 193 deletions.
diff --git a/src/packages/__VUE/drag/index.taro.vue b/src/packages/__VUE/drag/index.taro.vue
@@ -82,15 +82,18 @@ export default create({
       };
     });
     const domElem = Taro.getSystemInfoSync();
-    async function getInfo() {
-      const rec = await useTaroRect(myDrag);
-      state.elWidth = rec.width;
-      state.elHeight = rec.height;
-      state.initTop = rec.top;
-      state.initLeft = rec.left;
-
-      state.screenWidth = domElem.screenWidth;
-      state.screenHeight = domElem.screenHeight;
+    function getInfo() {
+      useTaroRect(myDrag).then(
+        (rec: any) => {
+          state.elWidth = rec.width;
+          state.elHeight = rec.height;
+          state.initTop = rec.top;
+          state.initLeft = rec.left;
+          state.screenWidth = domElem.screenWidth;
+          state.screenHeight = domElem.screenHeight;
+        },
+        () => {}
+      );
     }
 
     function goLeft() {

diff --git a/src/packages/__VUE/ellipsis/index.taro.vue b/src/packages/__VUE/ellipsis/index.taro.vue
@@ -118,9 +118,13 @@ export default create({
       }, 100);
     });
     // 获取省略号宽度
-    const getSymbolInfo = async () => {
-      const refe = await useTaroRect(symbolContain);
-      symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
+    const getSymbolInfo = () => {
+      useTaroRect(symbolContain).then(
+        (refe: any) => {
+          symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
+        },
+        () => {}
+      );
     };
 
     const getReference = async () => {
@@ -155,50 +159,61 @@ export default create({
     };
 
     // 计算省略号的位置
-    const calcEllipse = async () => {
-      const refe = await useTaroRect(rootContain);
-
-      if (refe.height <= maxHeight) {
-        state.exceeded = false;
-      } else {
-        const rowNum = Math.floor(props.content.length / (originHeight / lineHeight - 1)); // 每行的字数
-
-        if (props.direction === 'middle') {
-          const end = props.content.length;
-          ellipsis.leading = tailorContent(0, rowNum * (Number(props.rows) + 0.5), 'end');
-          ellipsis.tailing = tailorContent(props.content.length - rowNum * (Number(props.rows) + 0.5), end, 'start');
-        } else if (props.direction === 'end') {
-          const end = rowNum * (Number(props.rows) + 0.5);
-          ellipsis.leading = tailorContent(0, end);
-        } else {
-          const start = props.content.length - rowNum * (Number(props.rows) + 0.5) - 5;
+    const calcEllipse = () => {
+      useTaroRect(rootContain).then(
+        (refe: any) => {
+          if (refe.height <= maxHeight) {
+            state.exceeded = false;
+          } else {
+            const rowNum = Math.floor(props.content.length / (originHeight / lineHeight - 1)); // 每行的字数
+
+            if (props.direction === 'middle') {
+              const end = props.content.length;
+              ellipsis.leading = tailorContent(0, rowNum * (Number(props.rows) + 0.5), 'end');
+              ellipsis.tailing = tailorContent(
+                props.content.length - rowNum * (Number(props.rows) + 0.5),
+                end,
+                'start'
+              );
+            } else if (props.direction === 'end') {
+              const end = rowNum * (Number(props.rows) + 0.5);
+              ellipsis.leading = tailorContent(0, end);
+            } else {
+              const start = props.content.length - rowNum * (Number(props.rows) + 0.5) - 5;
 
-          ellipsis.tailing = tailorContent(start, props.content.length);
-        }
+              ellipsis.tailing = tailorContent(start, props.content.length);
+            }
 
-        // 进行兜底判断，是否符合要求
-        assignContent();
-        setTimeout(() => {
-          verifyEllipsis();
-        }, 100);
-      }
+            // 进行兜底判断，是否符合要求
+            assignContent();
+            setTimeout(() => {
+              verifyEllipsis();
+            }, 100);
+          }
+        },
+        () => {}
+      );
     };
 
     // 验证省略号
     const verifyEllipsis = async () => {
-      const refe = await useTaroRect(rootContain);
-      if (refe && refe.height && refe.height > maxHeight) {
-        if (props.direction == 'end') {
-          ellipsis.leading = ellipsis.leading?.slice(0, ellipsis.leading.length - 1);
-        } else {
-          ellipsis.tailing = ellipsis.tailing?.slice(1, ellipsis.tailing.length);
-        }
+      useTaroRect(rootContain).then(
+        (refe: any) => {
+          if (refe && refe.height && refe.height > maxHeight) {
+            if (props.direction == 'end') {
+              ellipsis.leading = ellipsis.leading?.slice(0, ellipsis.leading.length - 1);
+            } else {
+              ellipsis.tailing = ellipsis.tailing?.slice(1, ellipsis.tailing.length);
+            }
 
-        assignContent();
-        setTimeout(() => {
-          verifyEllipsis();
-        }, 100);
-      }
+            assignContent();
+            setTimeout(() => {
+              verifyEllipsis();
+            }, 100);
+          }
+        },
+        () => {}
+      );
     };
 
     const assignContent = () => {

diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
@@ -133,20 +133,24 @@ export default create({
       const start = nodes[0];
       nodes.forEach(async (node: HTMLDivElement, index: number) => {
         if (!node) return;
-        const rect = await useTaroRect(node);
-        if (rect && rect.height) {
-          const { height } = rect;
-          const oldHeight = state.cachePositions[index + state.start]
-            ? state.cachePositions[index + state.start].height
-            : props.height;
-          const dValue = oldHeight - height;
+        useTaroRect(node).then(
+          (rect: any) => {
+            if (rect && rect.height) {
+              const { height } = rect;
+              const oldHeight = state.cachePositions[index + state.start]
+                ? state.cachePositions[index + state.start].height
+                : props.height;
+              const dValue = oldHeight - height;
 
-          if (dValue && state.cachePositions[index + state.start]) {
-            state.cachePositions[index + state.start].bottom -= dValue;
-            state.cachePositions[index + state.start].height = height;
-            state.cachePositions[index + state.start].dValue = dValue;
-          }
-        }
+              if (dValue && state.cachePositions[index + state.start]) {
+                state.cachePositions[index + state.start].bottom -= dValue;
+                state.cachePositions[index + state.start].height = height;
+                state.cachePositions[index + state.start].dValue = dValue;
+              }
+            }
+          },
+          () => {}
+        );
       });
 
       let startIndex = 0;

diff --git a/src/packages/__VUE/menu/index.taro.vue b/src/packages/__VUE/menu/index.taro.vue
@@ -134,14 +134,17 @@ export default create({
     const updateOffset = (children: any) => {
       if (barRef.value) {
         setTimeout(() => {
-          useTaroRect(barRef).then((rect: any) => {
-            if (props.direction === 'down') {
-              offset.value = rect.bottom;
-            } else {
-              offset.value = Taro.getSystemInfoSync().windowHeight - rect.top;
-            }
-            children.toggle();
-          });
+          useTaroRect(barRef).then(
+            (rect: any) => {
+              if (props.direction === 'down') {
+                offset.value = rect.bottom;
+              } else {
+                offset.value = Taro.getSystemInfoSync().windowHeight - rect.top;
+              }
+              children.toggle();
+            },
+            () => {}
+          );
         }, 100);
       }
     };

diff --git a/src/packages/__VUE/navbar/index.taro.vue b/src/packages/__VUE/navbar/index.taro.vue
@@ -85,9 +85,12 @@ export default create({
     });
 
     const getNavHeight = () => {
-      useTaroRect(navbarRef).then((rect: any) => {
-        navHeight.value = `${rect.height}px`;
-      });
+      useTaroRect(navbarRef).then(
+        (rect: any) => {
+          navHeight.value = `${rect.height}px`;
+        },
+        () => {}
+      );
     };
 
     onMounted(() => {

diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
@@ -68,11 +68,9 @@
 import { onMounted, computed, watch, ref, PropType, CSSProperties } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 const { create } = createComponent('popover');
-import { useTaroRect, rectTaro } from '@/packages/utils/useTaroRect';
-import { useRect } from '@/packages/utils/useRect';
+import { useTaroRect, rectTaro, useTaroRectById } from '@/packages/utils/useTaroRect';
 import { isArray } from '@/packages/utils/util';
 import { PopoverList, PopoverTheme, PopoverLocation } from './type';
-import Taro from '@tarojs/taro';
 import Popup from '../popup/index.taro.vue';
 
 export default create({
@@ -224,38 +222,44 @@ export default create({
     });
     // 获取宽度
     const getContentWidth = async () => {
-      let rect;
-      if (props.targetId) {
-        if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
-          rect = useRect(document.querySelector(`#${props.targetId}`) as Element);
-        } else {
-          rect = await useTaroRect(props.targetId);
+      const solve = (rect: any) => {
+        if (!(rootRect.value && rect.top == rootRect.value.top && rect.width == rootRect.value.width)) {
+          setTimeout(() => {
+            getContentWidth();
+          }, 100);
         }
+        rootRect.value = rect;
+        getRootPosition();
+      };
+      if (props.targetId) {
+        useTaroRectById(props.targetId).then(
+          (rect: any) => {
+            solve(rect);
+          },
+          () => {}
+        );
       } else {
-        rect = await useTaroRect(popoverRef);
+        useTaroRect(popoverRef).then(
+          (rect: any) => {
+            solve(rect);
+          },
+          () => {}
+        );
       }
-
-      if (!(rootRect.value && rect.top == rootRect.value.top && rect.width == rootRect.value.width)) {
-        setTimeout(() => {
-          getContentWidth();
-        }, 100);
-      }
-      rootRect.value = rect;
-
-      getRootPosition();
     };
 
     const getPopoverContentW = async (type: number = 1) => {
       const el = type == 1 ? popoverContentRef : popoverContentRefCopy;
-
-      let rectContent = await useTaroRect(el);
-
-      conentRootRect = {
-        height: rectContent.height,
-        width: rectContent.width
-      };
-
-      getRootPosition();
+      useTaroRect(el).then(
+        (rect: any) => {
+          conentRootRect = {
+            height: rect.height || 0,
+            width: rect.width || 0
+          };
+          getRootPosition();
+        },
+        () => {}
+      );
     };
     watch(
       () => props.visible,