自定义指令 图片懒加载 vue3

自定义指令

export default {
  install (app) {
    // 自定义指令
    // <img :src="" />
    // <img v-lazy="" />
    // 图片懒加载
    app.directive('lazy', {
      // el v-lazy所在dom  binding.value是指定的值
      mounted (el, { value }) {
        // 参数一：回调函数 1. entries [{isIntersecting},{}]
        //                 2. observer : 被调用的IntersectionObserver实例
        // 参数二：可选的配置
        const observer = new IntersectionObserver(([{ isIntersecting }], observer) => {
          // isIntersecting 是否可视区域
          if (isIntersecting) {
            observer.unobserve(el) // 停止监听
            // 给el设置src属性
            // value = '123.png'
            el.src = value
            // 如果图片加载失败，显示默认的图片
            el.onerror = () => {
              el.src = require('@/assets/images/picLazy.png')
            }
          }
        }, {
          threshold: 0
        })
        observer.observe(el) // 监视el
      }
    })
  }
}

在main.js中导入

使用

<img v-lazy="xxxxx" />