v-lazy 图片懒加载

基础用法

查看代码

<template>
    <div style="display: flex; flex-wrap: wrap; gap: 12px">
        <img
            v-lazy="'https://picsum.photos/seed/rox1/200/200'"
            style="width: 120px; height: 120px; object-fit: cover; background: #eee; border-radius: 8px"
        />
        <img
            v-lazy="'https://picsum.photos/seed/rox2/200/200'"
            style="width: 120px; height: 120px; object-fit: cover; background: #eee; border-radius: 8px"
        />
        <img
            v-lazy="'https://picsum.photos/seed/rox3/200/200'"
            style="width: 120px; height: 120px; object-fit: cover; background: #eee; border-radius: 8px"
        />
    </div>
</template>

<script setup lang="ts">
import { lazyDirective } from "@a-drowned-fish/rox-v";

const vLazy = lazyDirective.directive;
</script>

使用方式

指令值支持「字符串」或「对象」两种形式：

<!-- 仅传入图片地址 -->
<img v-lazy="'https://example.com/a.png'" />

<!-- 传入完整配置 -->
<img
    v-lazy="{
        default: 'placeholder.png', // 进入视口前展示的占位图
        src: 'https://example.com/a.png',
        observeOptions: { rootMargin: '0px', threshold: 0.1 },
    }"
/>