lazy-component.mjs 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { h } from "vue";
  2. import { inBrowser, useRect } from "@vant/use";
  3. var stdin_default = (lazy) => ({
  4. props: {
  5. tag: {
  6. type: String,
  7. default: "div"
  8. }
  9. },
  10. emits: ["show"],
  11. render() {
  12. return h(
  13. this.tag,
  14. this.show && this.$slots.default ? this.$slots.default() : null
  15. );
  16. },
  17. data() {
  18. return {
  19. el: null,
  20. state: {
  21. loaded: false
  22. },
  23. show: false
  24. };
  25. },
  26. mounted() {
  27. this.el = this.$el;
  28. lazy.addLazyBox(this);
  29. lazy.lazyLoadHandler();
  30. },
  31. beforeUnmount() {
  32. lazy.removeComponent(this);
  33. },
  34. methods: {
  35. checkInView() {
  36. const rect = useRect(this.$el);
  37. return inBrowser && rect.top < window.innerHeight * lazy.options.preLoad && rect.bottom > 0 && rect.left < window.innerWidth * lazy.options.preLoad && rect.right > 0;
  38. },
  39. load() {
  40. this.show = true;
  41. this.state.loaded = true;
  42. this.$emit("show", this);
  43. },
  44. destroy() {
  45. return this.$destroy;
  46. }
  47. }
  48. });
  49. export {
  50. stdin_default as default
  51. };