vue-lazyload使用方法

Vue-Lazyload 是一个 Vue.js 的插件，用于实现图片的懒加载，可以优化页面加载速度。以下是 Vue-Lazyload 的使用方法：

1. 安装

使用 npm 安装 Vue-Lazyload：

npm install vue-lazyload --save

2. 引入

在 main.js 中引入：

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

Vue.use(VueLazyload)

3. 使用

在需要懒加载的图片标签中使用 `v-lazy` 指令：

<template>
  <div>
    <img v-lazy="imgSrc" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'https://www.example.com/img.jpg'
    }
  }
}
</script>

其中，`imgSrc` 为图片的路径，可以通过计算属性或者从后端获取。

4. 配置

可以在 `Vue.use(VueLazyload)` 中传入配置对象进行自定义配置，例如：

Vue.use(VueLazyload, {
  loading: 'https://www.example.com/loading.gif',
  error: 'https://www.example.com/error.jpg',
  attempt: 3
})

其中，`loading` 和 `error` 分别为图片加载中和加载失败时的占位图，`attempt` 为加载失败后的重试次数。

以上就是 Vue-Lazyload 的基本使用方法。