vue-lazyload 再封装自定义图片指令

好的，可以的。

首先，我们需要知道 `vue-lazyload` 是一个 Vue 插件，它提供了一个指令 `v-lazy`，可以用来实现图片懒加载。它的使用方式如下：

<img v-lazy="imgUrl">

其中，`imgUrl` 是图片的地址。当图片进入可视区域时，`v-lazy` 指令会自动将 `img` 标签的 `src` 属性设置为 `imgUrl`，从而实现图片的加载。

接下来，我们可以封装一个自定义指令，来简化 `v-lazy` 的使用。

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  loading: require('@/assets/loading.gif')
})

Vue.directive('lazy', {
  bind: (el, binding) => {
    el.setAttribute('data-src', binding.value)
    el.setAttribute('src', require('@/assets/loading.gif'))
  },
  inserted: el => {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        const imgSrc = el.getAttribute('data-src')
        el.setAttribute('src', imgSrc)
        observer.disconnect()
      }
    })
    observer.observe(el)
  }
})

上面的代码中，我们使用 `Vue.directive` 方法定义了一个名为 `lazy` 的自定义指令。该指令的作用和 `v-lazy` 相同，用于实现图片的懒加载。

在自定义指令的 `bind` 钩子函数中，我们获取了图片的地址，并将其设置为 `data-src` 属性的值。同时，我们将 `src` 属性的值设置为一个占位图，这里使用了一个 loading 图片。

在自定义指令的 `inserted` 钩子函数中，我们使用了 `IntersectionObserver` API 来观察图片是否进入了可视区域。当图片进入可视区域时，我们将 `src` 属性的值设置为 `data-src` 属性的值，从而实现图片的加载。

最后，我们使用 `Vue.use` 方法将 `vue-lazyload` 插件安装到 Vue 中，并设置了一个全局的 loading 图片。

接下来，在 Vue 模板中，就可以使用我们自定义的指令了：

<img v-lazy="imgUrl">

其中，`imgUrl` 是图片的地址。

希望这个例子能对你有所帮助！