vDataLazy

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

引入版本

0.80.0

Demo

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

  const list = ref<number[]>([])
  const loading = ref(false)

  const loadList = async (): Promise<void> => {
    loading.value = true
    console.log('进入视口，开始加载数据')
    try {
      // 模拟接口请求，替换为真实axios/fetch
      await new Promise<void>(resolve => setTimeout(resolve, 1200))
      list.value = [1, 2, 3, 4, 5]
    } catch (e) {
      console.error('请求异常', e)
    } finally {
      loading.value = false
    }
  }
</script>

<template>
  <div style="height: 100dvh">
    <UseLineTitle title="滚动往下看" />
  </div>

  <!-- 简写：直接传入回调函数 -->
  <ul v-data-lazy="loadList">
    <li v-if="loading">📦 数据加载中......</li>
    <li
      v-for="item in list"
      :key="item"
    >
      {{ item }}
    </li>
  </ul>

  <!-- 对象配置：rootMargin 提前100px就触发 -->
  <!-- v-data-lazy="{ callback: loadList, rootMargin: '100px' }" -->
</template>