diff --git a/packages/vant-lazyload/src/index.js b/packages/vant-lazyload/src/index.js index a612b7b5c..9715734a6 100644 --- a/packages/vant-lazyload/src/index.js +++ b/packages/vant-lazyload/src/index.js @@ -26,8 +26,7 @@ export const Lazyload = { app.directive('lazy', { beforeMount: lazy.add.bind(lazy), - update: lazy.update.bind(lazy), - updated: lazy.lazyLoadHandler.bind(lazy), + updated: lazy.update.bind(lazy), unmounted: lazy.remove.bind(lazy), }); diff --git a/packages/vant-lazyload/src/lazy-component.js b/packages/vant-lazyload/src/lazy-component.js index d01683891..66a58fd87 100644 --- a/packages/vant-lazyload/src/lazy-component.js +++ b/packages/vant-lazyload/src/lazy-component.js @@ -9,14 +9,16 @@ export default (lazy) => { default: 'div', }, }, + emits: ['show'], + render() { return h( this.tag, - null, this.show && this.$slots.default ? this.$slots.default() : null ); }, + data() { return { el: null, @@ -27,18 +29,22 @@ export default (lazy) => { 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 ( @@ -49,11 +55,13 @@ export default (lazy) => { this.rect.right > 0 ); }, + load() { this.show = true; this.state.loaded = true; this.$emit('show', this); }, + destroy() { return this.$destroy; },