<template>
  <div class="home-panel">
    <div class="head">
      <h3>{{ title }}<small>{{ subTitle }}</small></h3>
    </div>
    <slot name="main" /> <!-- 內(nèi)容拼圖位 -->
  </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() // 停止觀察，避免重復(fù)觸發(fā)
          }
        })
      }
    })
  }
}

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

<HomePanel title="數(shù)碼館">
  <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>