图片懒加载指令

1.安装@vueuse/core 包，它封装了常见的一些交互逻辑

vueuse/core : 组合式API常用复用逻辑的集合

npm i @vueuse/core

2.封装图片懒加载的指令

useIntersectionObserver 方法

import { useIntersectionObserver } from '@vueuse/core'

export const directivePlugin = {
  install (app) {
    console.log(app)
    // app.directive  进行全局指令注册
    app.directive('img-lazy', {
      mounted (el, binding) {
        console.log(el, binding.value)
        // 懒加载的核心逻辑
        // 思路: 判断图片是否进入到视口区域 进来就正式加载图片
        // 实现方案: 1. 如何得知图片进入视口了？  2.如何能让图片开始加载？ -> src赋值
        const { stop } = useIntersectionObserver(
          el, // 监听谁就把谁放过来
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 监听的元素进入视口就是true 否则就是false
            // 比较严格 纵向和横向都会监听
            // 每次进来视口和出去视口都会重复执行
            // 如果我们想停止监听  手动调用stop方法
            console.log(isIntersecting)
            if (isIntersecting) {
              el.src = binding.value
              stop()
            }
          }
        )
      }
    })
  }
}

3.使用指令

 <ul class="goods-list">
   <li v-for="item in hotData" :key="item.id">
    <RouterLink to="/">
     <img alt="" v-img-lazy="item.picture" />
     <p class="name">{{ item.title }}</p>
     <p class="desc">{{ item.alt }}</p>
    </RouterLink>
   </li>
  </ul>