歡迎來到第20天，每天一點一滴努力，記錄自己的成長...

You don’t have time to be timid.
人生沒有時間膽怯。

一般網站適用組件功能–輪播圖，
適用於放置網站廣告宣傳文、產品圖。

Carousel W3C School

一般 Carousel 輪撥圖，HTML 引入 bootstrap、jquery 套件，
Bootstrap 通過舔加 CSS類和使用 JavaScript 插件提供輪播圖效果。

配置文件，PrimeVue Carousel 套件

1. 配置 nuxt.config.ts**： 在 nuxt.config.ts 中添加 primevue.js 文件

export default defineNuxtConfig({
  primevue: {
    components: {
      prefix: "p-",
      include: [
        "carousel",
      ]
    },
  },
  plugins: [{ src: '~/plugins/primevue.js', ssr: false }],
});

PrimeVue Carousel 輪撥圖組件

PrimeVue提供一個響應式的產品輪播圖。透過定義 Carousel 元件的 value、numVisible、numScroll 和 responsiveOptions 屬性，結合自訂的項目範本和樣式，實現一個功能豐富、樣式美觀的輪播圖元件。

• value: 綁定資料來源。
• numVisible: 每次顯示的項目數。
• numScroll: 每次滾動的項目數。
• responsiveOptions: 響應式配置，當螢幕寬度達到指定的 breakpoint 時，調整 numVisible 和 numScroll 的值。
• circular: 啟用循環滾動的功能

自訂項目 template 範本

<template #item="slotProps">
....
</template>

1. #item 插槽來定義每個項目的顯示方式。
2. slotProps 提供了目前項目的資料（如 image、name、price 和 inventoryStatus）。

問題: carousel 圖片閃爍問題

在輪播圖（carousel）元件中，遇到圖片閃爍的問題，通常是因為圖片的載入、渲染或元件的重新渲染所導致的。

解決方式:
使用預載圖像:
輪播圖顯示之前，請確保所有圖像已經完全載入。可以使用 JavaScript 在圖片載入完成後再顯示輪播圖。

*使用循環和 Image 物件預先載入圖片

import { ref, onMounted } from 'vue';

// 圖片 URL 列表
const imageUrls = ref([
  'url1.jpg',
  'url2.jpg',
  'url3.jpg'
]);

// 預加載圖片的函数
const preloadImages = () => {
  const promises = imageUrls.value.map(url => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(url); // 图片加載成功
      img.onerror = () => reject(url); // 图片加載失敗
      img.src = url;
    });
  });

  return Promise.all(promises); // 返回一个 Promise，当所有图片都加载完成时会 resolved
};

// 在组件挂载后执行预加载
onMounted(() => {
  preloadImages()
    .then(() => {
      console.log('所有图片都已成功加载');
      // 继续执行初始化代码，例如初始化轮播图
    })
    .catch(url => {
      console.error('图片加载失败:', url);
    });
});

1. Promise.all:
   用於處理多個非同步操作並等待所有操作完成。接受一個包含多個 Promise 的數組，並傳回一個新的 Promise，
   1. 所有 Promise 都 resolved 時，這個新的 Promise 也會 resolved。
   2. 其中一個 Promise rejected，新的 Promise 會被 rejected。
2. Image 物件:
   用於建立和載入圖片。透過設定 src 屬性來開始載入圖片，並透過 onload 和 onerror 事件處理圖片載入成功和失敗的情況。
3. onMounted: 在 Vue 3 元件中，當元件掛載到 DOM 後執行。用於在元件初始化時執行預先載入操作。

參考資料:
https://primevue.org/carousel/