Vue3实战之插槽封装与懒加载详解

<template>
  <div class="home-panel">
    <div class="head">
      <h3>{{ title }}<small>{{ subTitle }}</small></h3>
    </div>
    <slot name="main" /> <!-- 内容拼图位 -->
  </div>
</template>

<script setup>
defineProps({ title: String, subTitle: String })
</script>

<HomePanel title="新鲜好物" sub-title="新鲜出炉">
  <template #main> <!-- 填充拼图 -->
    <ul class="goods-list">
      <li v-for="item in list">{{ item.name }}</li>
    </ul>
  </template>
</HomePanel>

// 全局指令：directives/lazy.js
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    app.directive('img-lazy', {
      mounted(el, binding) {
        // 当元素进入视口时
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value // 替换真实src
            stop() // 停止观察，避免重复触发
          }
        })
      }
    })
  }
}

<img v-img-lazy="goods.picture" alt="商品图" />

<HomePanel title="数码馆">
  <template #main>
    <div class="box">
      <img v-img-lazy="bannerUrl" class="cover" /> <!-- 大图懒加载 -->
      <ul>
        <li v-for="goods in list">
          <GoodsItem :goods="goods" /> <!-- 子组件插槽 -->
        </li>
      </ul>
    </div>
  </template>
</HomePanel>

<!-- GoodsItem子组件 -->
<template>
  <RouterLink>
    <img v-img-lazy="goods.picture" /> <!-- 商品图懒加载 -->
    <p>{{ goods.name }}</p>
  </RouterLink>
</template>