refactor(rect): remove getRect behavior (#3795)

packages/collapse-item/index.ts

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 
 VantComponent({
@@ -70,11 +71,9 @@ VantComponent({
 
     updateStyle(expanded: boolean) {
       const { inited } = this;
-      this.getRect('.van-collapse-item__content')
+      getRect
-        .then(
+        .call(this, '.van-collapse-item__content')
-          (rect: WechatMiniprogram.BoundingClientRectCallbackResult) =>
+        .then((rect) => rect.height)
-            rect.height
-        )
         .then((height: number) => {
           const { animation } = this;
 

packages/dropdown-menu/index.ts

@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
+import { addUnit, getRect } from '../common/utils';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
 let ARRAY: TrivialInstance[] = [];
@@ -101,11 +101,9 @@ VantComponent({
     getChildWrapperStyle() {
       const { zIndex, direction } = this.data;
 
-      return this.getRect('.van-dropdown-menu').then(
+      return getRect.call(this, '.van-dropdown-menu').then((rect) => {
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
         const { top = 0, bottom = 0 } = rect;
-          const offset =
+        const offset = direction === 'down' ? bottom : this.windowHeight - top;
-            direction === 'down' ? bottom : this.windowHeight - top;
 
         let wrapperStyle = `z-index: ${zIndex};`;
 
@@ -116,8 +114,7 @@ VantComponent({
         }
 
         return wrapperStyle;
-        }
+      });
-      );
     },
 
     onTitleTap(event: WechatMiniprogram.TouchEvent) {

packages/index-anchor/index.ts

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 
 VantComponent({
@@ -20,18 +21,12 @@ VantComponent({
 
   methods: {
     scrollIntoView(scrollTop) {
-      this.getBoundingClientRect().then(
+      getRect.call(this, '.van-index-anchor-wrapper').then((rect) => {
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
         wx.pageScrollTo({
           duration: 0,
           scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
         });
-        }
+      });
-      );
-    },
-
-    getBoundingClientRect() {
-      return this.getRect('.van-index-anchor-wrapper');
     },
   },
 });

packages/mixins/basic.ts

@@ -13,23 +13,5 @@ export const basic = Behavior({
 
       return new Promise((resolve) => wx.nextTick(resolve));
     },
-
-    getRect(selector: string, all: boolean) {
-      return new Promise((resolve) => {
-        wx.createSelectorQuery()
-          .in(this)
-          [all ? 'selectAll' : 'select'](selector)
-          .boundingClientRect((rect) => {
-            if (all && Array.isArray(rect) && rect.length) {
-              resolve(rect);
-            }
-
-            if (!all && rect) {
-              resolve(rect);
-            }
-          })
-          .exec();
-      });
-    },
   },
 });

packages/rate/index.ts

@@ -1,3 +1,4 @@
+import { getAllRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { canIUseModel } from '../common/version';
 
@@ -82,8 +83,7 @@ VantComponent({
 
       const { clientX } = event.touches[0];
 
-      this.getRect('.van-rate__icon', true).then(
+      getAllRect.call(this, '.van-rate__icon').then((list) => {
-        (list: WechatMiniprogram.BoundingClientRectCallbackResult[]) => {
         const target = list
           .sort((item) => item.right - item.left)
           .find((item) => clientX >= item.left && clientX <= item.right);
@@ -93,8 +93,7 @@ VantComponent({
             currentTarget: target,
           });
         }
-        }
+      });
-      );
     },
   },
 });

packages/slider/index.ts

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { canIUseModel } from '../common/version';
+import { getRect } from '../common/utils';
 
 VantComponent({
   mixins: [touch],
@@ -60,13 +61,11 @@ VantComponent({
       this.touchMove(event);
       this.dragStatus = 'draging';
 
-      this.getRect('.van-slider').then(
+      getRect.call(this, '.van-slider').then((rect) => {
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
         const diff = (this.deltaX / rect.width) * 100;
         this.newValue = this.startValue + diff;
         this.updateValue(this.newValue, false, true);
-        }
+      });
-      );
     },
 
     onTouchEnd() {
@@ -83,13 +82,11 @@ VantComponent({
 
       const { min } = this.data;
 
-      this.getRect('.van-slider').then(
+      getRect.call(this, '.van-slider').then((rect) => {
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
         const value =
           ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
         this.updateValue(value, true);
-        }
+      });
-      );
     },
 
     updateValue(value: number, end: boolean, drag: boolean) {

packages/sticky/index.ts

@@ -1,10 +1,9 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { pageScrollMixin } from '../mixins/page-scroll';
 
 const ROOT_ELEMENT = '.van-sticky';
 
-type BoundingClientRect = WechatMiniprogram.BoundingClientRectCallbackResult;
-
 VantComponent({
   props: {
     zIndex: {
@@ -66,8 +65,10 @@ VantComponent({
       this.scrollTop = scrollTop || this.scrollTop;
 
       if (typeof container === 'function') {
-        Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(
+        Promise.all([
-          ([root, container]: BoundingClientRect[]) => {
+          getRect.call(this, ROOT_ELEMENT),
+          this.getContainerRect(),
+        ]).then(([root, container]) => {
           if (offsetTop + root.height > container.height + container.top) {
             this.setDataAfterDiff({
               fixed: false,
@@ -82,13 +83,12 @@ VantComponent({
           } else {
             this.setDataAfterDiff({ fixed: false, transform: 0 });
           }
-          }
+        });
-        );
 
         return;
       }
 
-      this.getRect(ROOT_ELEMENT).then((root: BoundingClientRect) => {
+      getRect.call(this, ROOT_ELEMENT).then((root) => {
         if (offsetTop >= root.top) {
           this.setDataAfterDiff({ fixed: true, height: root.height });
           this.transform = 0;

packages/tree-select/index.ts

@@ -70,7 +70,7 @@ VantComponent({
       const { items, mainActiveIndex } = this.data;
       const { children = [] } = items[mainActiveIndex] || {};
 
-      return this.set({ subItems: children });
+      this.setData({ subItems: children });
     },
   },
 });