最後是 Misc 類的介紹，挑選幾個較常見元件：

ScrollTop

基本用法

針對內容太長的頁面，若要提供「回到最上面」的功能，直接在 App.vue 加入 <ScrollTop /> 即當頁面滑動時，在右下角顯示向上按鈕：

// App.vue
<template>
  <RouterView />
  <ScrollTop />
</template>

往下滾動頁面時：

特定區塊下使用

以下範例搭配 ScrollPanel 的使用，屬性的設定說明如下：

1. target 屬性為 parent(預設為 window 針對整體視窗)，才會根據其父元素進行偵測。
2. buttonProps 可更改按鈕樣式。
3. threshold 設定滾動高度多少時出現此向上按鈕，預設為 400。

在該區塊向下滾動時，也會顯示向上按鈕：

<ScrollPanel style="width: 250px; height: 200px">
    <p>
        Lorem ipsum ...
    </p>
    <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'info', raised: true, rounded: true }" />
</ScrollPanel>

ProgressBar

進度條的元件可使用在完成度上的檢視。

基本用法

import { ref } from 'vue';
const value = ref(35);

<ProgressBar :value="value"></ProgressBar>

Indeterminate

若不考慮進度條的值，另可將此進度條元件作為 loading 動畫使用。
用法如下：
提供 mode 屬性並設定為 indeterminate，在換頁或換到下一步驟前的等待。預設為 determinate。

<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>

加上 setTimeout 模擬 loading 的使用，2 秒後停止。

const switchValue = ref('indeterminate');
setTimeout(() => {
    switchValue.value = 'determinate';
}, 2000);

<ProgressBar :mode="switchValue" style="height: 6px"></ProgressBar>

AnimateOnScroll

常用於前台展示圖片或區塊會使用到的進場動畫，此動畫的引入方法如下：

1. 在 main.js 載入

import AnimateOnScroll from 'primevue/animateonscroll';

app.directive('animateonscroll', AnimateOnScroll);

2. 使用上加上 v-animateonscroll 的指令，物件內設定進場(enterClass)及離場(leaveClass)效果。提供效果：

• fadein / fadeout
• fadeinleft / fadeoutleft
• fadeinright / fadeoutright
• zoomin
• flipleft
• flipup
• scalein

<!-- zoomin 進場；fadeout 離場 -->
<div v-animateonscroll="{ enterClass: 'animate-zoomin', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000">
    <span class="text-3xl font-bold">zoom</span>
</div>

Chip

Chip 通常使用在圖示、標籤類的顯示上。
一般使用上加上 label 屬性顯示文字即可，另外可加上 removable 屬性，會自動產生個叉叉圖示，點擊後會消失。

<div class="flex space-x-4">
    <Chip label="保濕" />
    <Chip label="抗皺" />
    <Chip label="美白" removable />
</div>

也可加上 icon 或是 image 屬性：

<Chip label="Apple" icon="pi pi-apple" />
<Chip label="Facebook" icon="pi pi-facebook" removable />
<Chip label="綠標" image="https://fakeimg.pl/10x10/00cc99" />
<Chip label="紅標" image="https://fakeimg.pl/10x10/ff0000" />

Badge

基本使用帶入 value 值顯示標籤內容，可變化的樣式包含

1. severity：不同代表色
2. size：尺寸

<div class="flex space-x-4 items-center">
    <Badge value="2"></Badge>
    <Badge value="4" severity="info"></Badge>
    <Badge value="6" size="large" severity="warn"></Badge>
    <Badge value="8" size="xlarge" severity="success"></Badge>
</div>

另外可使用 OverlayBadge 元件，包裝圖示及 Badge 值，常見於購物車的圖示搭配其右上角商品數量或是個人通知的提醒搭配通知數。

<OverlayBadge value="2" severity="danger">
    <i class="pi pi-bell text-yellow-400" style="font-size: 2rem" />
</OverlayBadge>
<OverlayBadge value="3" severity="danger">
    <i class="pi pi-shopping-cart" style="font-size: 2rem" />
</OverlayBadge>

完賽心得

最後很高興完成今年的鐵人賽，由於是第一次參賽，一開始還不太確定要撰寫的內容，恰巧有機會彙整下 PrimeVue 第四版，順勢再多了解各元件的細節，雖然沒有每個類別的元件都介紹到，但有提及的元件盡量搭配範例或個人經驗，避免只是淪為文件上的翻譯。

最後的最後，在翻譯 Accordion 元件時，發現以為是 Lorem 的假字內容最後隱藏一句可翻譯出的句子，應該是指必須付出努力才能做好完善的準備，在此分享給各位~

參考連結：

1. https://primevue.org/animateonscroll/
2. https://primevue.org/badge/
3. https://primevue.org/chip/
4. https://primevue.org/scrolltop/
5. https://primevue.org/progressbar/