Vue.js的5星评级组件 vue-star-rating

Vue.js的5星评级组件 vue-star-rating
插件名称 vue-star-rating
发布时间 2020年5月19日
插件作者 ramazanerikli

轻巧,简洁的五星级评分组件,可对Vue.js应用程序上的产品,评论和帖子进行评分。

变更日志:

v2.1.0(10/08/2020)

  • 添加了新的动画道具,该动画道具在鼠标悬停时会稍微旋转并扩展星星
  • 当设置为true时,新的单击时激活道具会在单击时而非单击时应用激活颜色
  • 新的活动边框颜色道具,当星星处于活动状态时允许更改边框颜色
  • active-color和active-border-color现在可以选择接受颜色值数组,以使每个星星单独
    发光,不再需要设置glow-color
  • 现在支持屏幕阅读器。您可以使用屏幕阅读器作用域内的插槽来更改默认消息(“ {{maxRating}}星中的评级为{{rating}})”

v2.0.3(09/26/2020)

  • 修复了始终在黑暗中突出显示辉光的问题

v2(09/24/2020)

  • 已针对Vue.js 3更新

使用

1.导入星级评定组件。

import Rating from './components/Rating.vue'

2.将星级评分组件添加到应用模板,并确定当前和最高评分值,如下所示:

<Rating :grade="3" :maxStars="5" :hasCounter="true" />

3.渲染星级评定组件。

export default {
  name: 'App',
  components: {
    Rating
  },
  beforeCreate: function() {
    // do something
  }
}