feat: add @vant/lazyload pacakge

2020-11-30 19:05:28 +08:00
parent 8b69192102
commit b7306e311b
15 changed files with 1693 additions and 6 deletions
@@ -0,0 +1,58 @@
+import { h } from 'vue';
+import { inBrowser } from './util';
+
+export default (lazy) => {
+  return {
+    props: {
+      tag: {
+        type: String,
+        default: 'div',
+      },
+    },
+    emits: ['show'],
+    render() {
+      return h(this.tag, null, this.show ? this.$slots.default : null);
+    },
+    data() {
+      return {
+        el: null,
+        state: {
+          loaded: false,
+        },
+        rect: {},
+        show: false,
+      };
+    },
+    mounted() {
+      this.el = this.$el;
+      lazy.addLazyBox(this);
+      lazy.lazyLoadHandler();
+    },
+    beforeUnmount() {
+      lazy.removeComponent(this);
+    },
+    methods: {
+      getRect() {
+        this.rect = this.$el.getBoundingClientRect();
+      },
+      checkInView() {
+        this.getRect();
+        return (
+          inBrowser &&
+          this.rect.top < window.innerHeight * lazy.options.preLoad &&
+          this.rect.bottom > 0 &&
+          this.rect.left < window.innerWidth * lazy.options.preLoad &&
+          this.rect.right > 0
+        );
+      },
+      load() {
+        this.show = true;
+        this.state.loaded = true;
+        this.$emit('show', this);
+      },
+      destroy() {
+        return this.$destroy;
+      },
+    },
+  };
+};