Vue 評分元件 - PrimeVue 元件庫

導入 #


import Rating from 'primevue/rating';

基本 #

評分元件使用 v-model 屬性進行雙向數值綁定。


<Rating v-model="value" />

表單 #

評分元件與 PrimeVue 表單庫無縫整合。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
    <div class="flex flex-col items-center gap-2">
        <Rating name="rating" />
        <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

星星數量 #

要顯示的星星數量使用 stars 屬性定義。


<Rating v-model="value" :stars="10" />

範本 #

自訂圖示用於使用 onicon、officon 和 cancelicon 插槽覆蓋預設圖示。


<Rating v-model="value">
    <template #onicon>
        <img src="/images/rating/custom-onicon.png" height="24" width="24" />
    </template>
    <template #officon>
        <img src="/images/rating/custom-officon.png" height="24" width="24" />
    </template>
</Rating>

唯讀 #

當存在 readOnly 時，數值無法編輯。


<Rating v-model="value" readonly />

已停用 #

當存在 disabled 時，會應用視覺提示來指示旋鈕無法互動。


<Rating v-model="value" disabled />

輔助功能 #

螢幕閱讀器

評分元件內部使用僅對螢幕閱讀器可見的單選按鈕。要讀取項目的值，是透過 aria 屬性的 star 和 stars 從 locale API 檢索。

鍵盤支援

鍵盤互動衍生自瀏覽器對群組中單選按鈕的原生處理。

按鍵	功能
tab	如果沒有值，則將焦點移動到代表該值的星星，否則第一個星星接收焦點。
左箭頭上箭頭	將焦點移動到前一個星星，如果沒有前一個星星，則最後一個單選按鈕接收焦點。
右箭頭下箭頭	將焦點移動到下一個星星，如果沒有下一個星星，則第一個星星接收焦點。
空格鍵	如果焦點星星不代表該值，則將該值更改為星星的值。

Rating