【亲测免费】 Vue 星级评价组件 - 易用且高度自定义

本篇文章将指导您如何安装并使用这款适用于 Vue 2.x 和 3.x 的星级评价组件，通过详细的步骤和示例，使您能够轻松集成并定制化这个功能丰富的小工具。

安装指南

Vue 2.x 用户

对于仍在使用 Vue 2.x 的项目，执行以下命令来添加组件：

npm install vue-star-rating

Vue 3.x 用户

对于已迁移到 Vue 3.x 的项目，需要安装特定版本：

npm install vue-star-rating@next

项目使用说明

基础集成

在您的 Vue 组件中，首先进行导入：

// 对于所有版本
import StarRating from 'vue-star-rating';

然后，在组件的配置中注册它（Vue 2.x 和 Vue 3.x 的差异）：

Vue 2.x

export default {
  components: {
    StarRating
  }
};

Vue 3.x

由于是全局注册的例子：

import { createApp } from 'vue';
import StarRating from 'vue-star-rating';

const app = createApp(App);
app.component('star-rating', StarRating);
app.mount('#app');

或者，如果你只想在单个文件中使用：

<script setup>
import StarRating from 'vue-star-rating';
</script>

嵌入组件

基础使用非常简单，只需在模板中插入 <star-rating> 标签即可：

<!-- Vue 2/3通用 -->
<star-rating v-model="rating"></star-rating>

注意Vue 3.x对v-model的语法略有不同，应使用v-model:rating。

API 使用文档

属性（Props）

组件提供了多个属性以供高度定制：

• increment: 评分增量，如设为0.5可得半星。
• rating: 初始评级值。
• max-rating: 最大评级数，默认5星。
• ... （更多属性省略，详细见官方文档）

自定义事件

组件触发的事件可用于响应用户的操作：

• Vue 2.x: rating-selected 更新后的评级值。
• Vue 3.x: update:rating 更新后的评级值。

例如，在Vue 3.x中监听事件：

<star-rating @update:rating="handleRatingChange"></star-rating>

<script>
function handleRatingChange(newRating) {
  console.log("新评级:", newRating);
}
</script>

针对屏幕阅读器的支持

通过插槽提供自定义的屏幕阅读信息，确保无障碍访问。

<star-rating>
  <template v-slot:screen-reader="slotProps">
    产品评分为{{slotProps.rating}}星，满分为{{slotProps.maxRating}}星。
  </template>
</star-rating>

结论

通过上述指南，您可以顺利地将该星级评价组件集成到Vue应用中，并利用其提供的诸多定制选项，为用户提供直观的交互体验。不论是用于电影评价、商品反馈还是任何其他需要用户评分的场景，这款组件都是一个轻量级且强大的选择。