vue3项目-小兔鲜儿笔记-首页03

1. 面板封装

提取首页的公用面板进行复用

• 头部

  • 标题和副标题由props传入

  • 右侧内容由具名插槽right传入

    • 查看更多封装成全局组件

• 主体

• 由默认插槽传入

<template>
  <!-- 封装面板组件 -->
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <h3>
          {{ title }}
          <small>{{ subTitle }}</small>
        </h3>
        <!-- 标题右侧具名插槽 -->
        <slot name="right"/>
      </div>
      <!-- 内容默认插槽 -->
      <slot/>
    </div>
  </div>
</template>

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

2. 应用面板举例：新鲜好物

<template>
  <div class="home-new">
    <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
      <!-- 右侧具名插槽使用查看更多组件 -->
      <template #right>
        <XtxMore />
      </template>
      <!-- 默认插槽传入主体内容 -->
      <template #default>
        <ul class="goods-list">
          <template v-if="goodsList.length">
            <li v-for="goods in goodsList" :key="goods.id">
              <router-link to="/">
                <img :src="goods.picture" alt="" />
                <div class="info">
                  <p class="name">{{ goods.desc }}</p>
                  <p class="price">￥{{ goods.price }}</p>
                </div>
              </router-link>
            </li>
          </template>
          <!-- 使用骨架屏处理数据正在加载的这段时间的显示 -->
          <template v-else>
            <li v-for="i in 4" :key="i">
              <XtxSkeleton width="306px" height="406px" />
            </li>
          </template>
        </ul>
      </template>
    </HomePanel>
  </div>
</template>

<script setup>
import HomePanel from '@/views/home/components/home-panel'
import { findNew } from '@/api/home'
import { ref } from 'vue'

const goodsList = ref([])
findNew().then((res) => {
  goodsList.value = res.result
})
</script>

3. 数据懒加载

目的：实现当组件进入可视区域时再加载数据

使用@vueuse/core中的useIntersectionObserver来实现监听元素进入可视区域的行为

函数的理解：

• 函数返回一个stop函数，用于停止监听元素进入可视区域的行为

• 函数传入两个参数

  • 参数一：target，是监听的目标元素

  • 参数二：callback函数，这个回调函数传入两个参数

    • 参数1：isIntersecting：是否进入可视区域，是布尔值，true是进入

    • 参数2：这里没有用到

封装数据懒加载函数：

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
 * 数据懒加载函数
 * @param {Element} target - 要观察的DOM对象
 * @param {Function} apiFn - 要执行的获取数据的函数
 */
export const useLazyData = (apiFn) => {
  const target = ref(null)
  const result = ref([])
  // stop 停止观察
  const { stop } = useIntersectionObserver(
    target, // 要监听的目标元素
    ([{ isIntersecting }], observerElement) => {
      // 如果元素已进入可视区域
      if (isIntersecting) {
        stop()
        // 调用api获取数据
        apiFn().then((res) => {
          result.value = res.result
        })
      }
    }
  )
  return {
    target,
    result
  }
}

使用时只需：
const {target, result} = useLazyData(apiFn) // 解构出来即可