vue3-lazy如何使用

Vue3-Lazy是一个Vue3.x的插件，可以实现图片懒加载和可见性检测。使用vue3-lazy非常简单，只需要按照以下步骤操作：

1. 安装vue3-lazy

使用npm或yarn安装vue3-lazy：

npm install vue3-lazy

或

yarn add vue3-lazy

2. 在Vue3项目中引入vue3-lazy

在Vue3项目的main.js或App.vue中引入vue3-lazy：

import { createApp } from 'vue';
import App from './App.vue';
import VueLazy from 'vue3-lazy';

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

3. 在需要使用懒加载的图片上添加指令

在需要使用懒加载的img标签上添加v-lazy指令，src属性设置为占位图，data-src属性设置为真实图片的地址：

<template>
  <div>
    <img v-lazy="'占位图地址'" data-src="'真实图片地址'">
  </div>
</template>

4. 配置可选参数

可以在main.js或App.vue中设置全局配置参数：

import { createApp } from 'vue';
import App from './App.vue';
import VueLazy from 'vue3-lazy';

const app = createApp(App);

app.use(VueLazy, {
  loading: '占位图地址', // 全局默认占位图
  error: '错误占位图地址', // 全局默认错误占位图
  throttleWait: 500, // 节流等待时间，默认200ms
  observerConfig: { // IntersectionObserver的配置
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  }
});

app.mount('#app');

以上就是vue3-lazy的使用方法，非常简单易用。