vue3局部注册vant的lazyload指令

在 Vue 3 中，可以通过 `app.directive` 方法来注册自定义指令。具体步骤如下：

1. 安装 vant：

   npm install vant -S

2. 在 Vue 3 中，需要使用 `createApp` 方法来创建应用实例，并且需要使用 `app.use` 方法来注册 vant 插件：

   import { createApp } from 'vue'
   import Vant from 'vant'
   import 'vant/lib/index.css'

   const app = createApp(App)
   app.use(Vant)
   app.mount('#app')

3. 在需要使用 `lazyload` 指令的组件中，使用 `app.directive` 方法来注册指令：

   import { defineComponent } from 'vue'

   export default defineComponent({
     name: 'MyComponent',
     directives: {
       lazyload: {
         mounted(el, binding) {
           const { value } = binding
           if (value) {
             el.setAttribute('data-src', value)
             el.setAttribute('src', '')
           }
         },
         updated(el, binding) {
           const { value } = binding
           if (value) {
             el.setAttribute('data-src', value)
             el.setAttribute('src', '')
           }
         }
       }
     }
   })

在上面的代码中，我们通过 `directives` 属性来注册 `lazyload` 指令，并且实现了 `mounted` 和 `updated` 钩子函数来实现图片的懒加载。

4. 在模板中使用 `v-lazyload` 指令：

   <template>
     <img v-lazyload="imageUrl" alt="图片">
   </template>

在上面的代码中，我们将 `imageUrl` 绑定到 `v-lazyload` 指令上，当图片进入可视区域时会自动加载。

这样就完成了在 Vue 3 中局部注册 vant 的 `lazyload` 指令。