vImgLazy

图片懒加载指令(仅支持在vue3项目中使用)

引入版本

0.80.0

Demo

<script setup lang="ts">
  import { vImgLazy } from '@wyfex/iutils'
</script>

<template>
  <ul>
    <li
      v-for="item of 9"
      :key="item"
      style="
        width: 50dvh;
        height: 50dvh;
        margin: auto;
        padding: 20px;
        text-align: center;
        border: 1px solid var(--el-border-color);
      "
    >
      <!-- 简写：直接传入真实图片地址，使用全局loading/error -->
      <!-- 该指令只支持原生img，不支持el-image，el-image可直接使用lazy属性实现懒加载-->
      <img
        v-img-lazy="
          `http://hilongjw.github.io/vue-lazyload/dist/avatar/test${item}.jpg`
        "
        style="max-height: 100%"
      />
      <!-- 对象写法：单元素局部覆盖占位图、rootMargin -->
      <!-- <img
        v-img-lazy="{
          src: `http://hilongjw.github.io/vue-lazyload/dist/avatar/test${item}.jpg`,
          loading: '/custom-loading.svg',
          error: '/custom-err.png',
          rootMargin: '200px'
        }"
        style="max-height: 100%"
      /> -->
    </li>
  </ul>
</template>

重要说明

图片懒加载支持全局配置默认占位图

import { createApp } from 'vue'
import App from './App.vue'
import { vImgLazy, setVImgLazyGlobal } from './directives/vImgLazy'
import loadingSvg from '@/assets/svgs/vip.svg'
import errorPng from '@/assets/imgs/404.png'

const app = createApp(App)

// 设置全局默认占位图
setVImgLazyGlobal({
  loading: loadingSvg,
  error: errorPng,
  rootMargin: '100px'
})

app.directive('img-lazy', vImgLazy)

app.mount('#app')