[备忘篇]简单实现一个vue指令图片懒加载...

下面是一个简单版的vue指令懒加载逻辑，只是为了提供一个简单的思路，有些兼容性问题可能没有考虑....

• 实现vue指令，导出
• 引入vue指令，注册
• 使用指令，实现懒加载

实现指令，导出

export default {
  inserted: function (el, binding) {
    // 获取指令参数
    let params = binding.value;
    // 或带有定位父级的元素
    const parent = el.offsetParent;
    // 获取overflow父容器的高度
    const parentHeight = parent.clientHeight;
    let onScroll = () => {
      // 图片距离顶部的距离-滚动上去的距离 < 是否小于可视区高度
      if (el.offsetTop - parent.scrollTop < parentHeight) {
        if (!el.src) el.src = params;
      }
    };
    // 监听scroll事件
    parent.addEventListener("scroll", onScroll);
    onScroll();
  },
}; 

局部引入，注册指令

import lazyLoad from "../directives/lazy-load";

export default {
  name: "page",
  components: {
    dropdownSelect,
  },
  directives: {
    lazyLoad,
  },
  data() {
    return {
      
    };
  },
  methods:{},
} 

使用指令

<template>
   <div class="pages">
      <div
        v-for="(item, index) in currentList"
        :key="index"
        class="img-item">
        <img v-lazy-load="item.src" alt="" />
      </div>
    </div>
</template>