chore(Lazyload): reuse some utils

packages/vant/jest.config.js

@@ -2,6 +2,7 @@ module.exports = {
   testPathIgnorePatterns: ['/node_modules/'],
   collectCoverageFrom: [
     'src/**/*.{js,jsx,ts,tsx,vue}',
+    '!src/lazyload/vue-lazyload/**',
     '!**/demo/**',
     '!**/test/**',
     '!**/lang/**',

packages/vant/src/lazyload/vue-lazyload/lazy-component.js

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import { inBrowser } from '@vant/use';
+import { inBrowser, useRect } from '@vant/use';
 
 export default (lazy) => ({
   props: {
@@ -24,7 +24,6 @@ export default (lazy) => ({
       state: {
         loaded: false,
       },
-      rect: {},
       show: false,
     };
   },
@@ -40,18 +39,14 @@ export default (lazy) => ({
   },
 
   methods: {
-    getRect() {
-      this.rect = this.$el.getBoundingClientRect();
-    },
-
     checkInView() {
-      this.getRect();
+      const rect = useRect(this.$el);
       return (
         inBrowser &&
-        this.rect.top < window.innerHeight * lazy.options.preLoad &&
+        rect.top < window.innerHeight * lazy.options.preLoad &&
-        this.rect.bottom > 0 &&
+        rect.bottom > 0 &&
-        this.rect.left < window.innerWidth * lazy.options.preLoad &&
+        rect.left < window.innerWidth * lazy.options.preLoad &&
-        this.rect.right > 0
+        rect.right > 0
       );
     },
 

packages/vant/src/lazyload/vue-lazyload/lazy-image.js

@@ -1,5 +1,6 @@
-import { inBrowser } from '@vant/use';
+import { useRect } from '@vant/use';
-import { loadImageAsync, noop } from './util';
+import { loadImageAsync } from './util';
+import { noop } from '../../utils';
 
 export default (lazyManager) => ({
   props: {
@@ -34,7 +35,6 @@ export default (lazyManager) => ({
         error: false,
         attempt: 0,
       },
-      rect: {},
       renderSrc: '',
     };
   },
@@ -66,17 +66,13 @@ export default (lazyManager) => ({
       this.options.loading = loading;
       this.renderSrc = this.options.loading;
     },
-    getRect() {
-      this.rect = this.$el.getBoundingClientRect();
-    },
     checkInView() {
-      this.getRect();
+      const rect = useRect(this.$el);
       return (
-        inBrowser &&
+        rect.top < window.innerHeight * lazyManager.options.preLoad &&
-        this.rect.top < window.innerHeight * lazyManager.options.preLoad &&
+        rect.bottom > 0 &&
-        this.rect.bottom > 0 &&
+        rect.left < window.innerWidth * lazyManager.options.preLoad &&
-        this.rect.left < window.innerWidth * lazyManager.options.preLoad &&
+        rect.right > 0
-        this.rect.right > 0
       );
     },
     load(onFinish = noop) {

packages/vant/src/lazyload/vue-lazyload/lazy.js

@@ -8,11 +8,11 @@ import {
   supportWebp,
   getDPR,
   getBestSelectionFromSrcset,
-  isObject,
   hasIntersectionObserver,
   modeType,
   ImageCache,
 } from './util';
+import { isObject } from '../../utils';
 import ReactiveListener from './listener';
 
 const DEFAULT_URL =
@@ -64,7 +64,6 @@ export default function () {
         attempt: attempt || 3,
         scale: scale || getDPR(scale),
         ListenEvents: listenEvents || DEFAULT_EVENTS,
-        hasbind: false,
         supportWebp: supportWebp(),
         filter: filter || {},
         adapter: adapter || {},

packages/vant/src/lazyload/vue-lazyload/listener.js

@@ -1,4 +1,6 @@
-import { loadImageAsync, noop } from './util';
+import { useRect } from '@vant/use';
+import { loadImageAsync } from './util';
+import { noop } from '../../utils';
 
 export default class ReactiveListener {
   constructor({
@@ -26,8 +28,6 @@ export default class ReactiveListener {
 
     this.options = options;
 
-    this.rect = null;
-
     this.$parent = $parent;
     this.elRenderer = elRenderer;
     this._imageCache = imageCache;
@@ -87,25 +87,17 @@ export default class ReactiveListener {
     }
   }
 
-  /*
-   * get el node rect
-   * @return
-   */
-  getRect() {
-    this.rect = this.el.getBoundingClientRect();
-  }
-
   /*
    *  check el is in view
    * @return {Boolean} el is in view
    */
   checkInView() {
-    this.getRect();
+    const rect = useRect(this.el);
     return (
-      this.rect.top < window.innerHeight * this.options.preLoad &&
+      rect.top < window.innerHeight * this.options.preLoad &&
-      this.rect.bottom > this.options.preLoadTop &&
+      rect.bottom > this.options.preLoadTop &&
-      this.rect.left < window.innerWidth * this.options.preLoad &&
+      rect.left < window.innerWidth * this.options.preLoad &&
-      this.rect.right > 0
+      rect.right > 0
     );
   }
 

packages/vant/src/lazyload/vue-lazyload/util.js

@@ -158,12 +158,6 @@ export const loadImageAsync = (item, resolve, reject) => {
   image.onerror = (e) => reject(e);
 };
 
-export function isObject(obj) {
-  return obj !== null && typeof obj === 'object';
-}
-
-export function noop() {}
-
 export class ImageCache {
   constructor({ max }) {
     this.options = {