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 />

可访问性 #

屏幕阅读器

评分组件在内部使用仅对屏幕阅读器可见的单选按钮。要读取的项的值从 locale API 通过 aria 属性的 star 和 stars 获取。

键盘支持

键盘交互源自浏览器对组中单选按钮的本机处理。

按键	功能
tab	将焦点移动到表示值的星星，如果没有，则第一个星星接收焦点。
左箭头上箭头	将焦点移动到上一个星星，如果没有，则最后一个单选按钮接收焦点。
右箭头下箭头	将焦点移动到下一个星星，如果没有，则第一个星星接收焦点。
空格键	如果焦点星星不代表该值，则将该值更改为该星星的值。

评分