基于Vue 2.x的<星星评分>组件

预览

在线demo

功能:

• 集成了SVG矢量星图
• 可自定义评分星星的数量
• 可传入预设评分
• 可自定义评分星图的颜色
• 可自定义评分星图的大小
• 可自定义是否为只读模式

Usage:

通过 npm 指令安装:

npm i vue-rating-it --save

在组件中加载:

 import VueRatingIt from 'vue-rating-it'

注册评分组件:

component: {
  VueRatingIt
}

接着，在模版文件中定义组件

<vue-rating-it :score="score" @rating="rate => score = rate" ></vue-rating-it>

文档:

属性

| 属性 | 描述 | 默认值 | | -- | -- | -- | | total | 一共显示多少颗星星进行评级，默认为5颗星 | 5 | | score | 默认初始化时的评分，小数点根据四舍五入显示评分，如果是3.2则显示3颗星高亮，如果是3.7则是4颗 | 0 | | color | 配置星星的颜色 | #FFD600 | | size | 配置星星的大小，可以使用常用的单位 'rem','px'等，根据个人要求 | '2rem' | | disabled | 如果设置为true，则不可点击也没有悬停事件 | false |

事件

| 事件 | 描述 | 参数 | | -- | -- | -- | | rating | 点击星星后触发的事件，会返回一个整数（目前还不支持小数模式） | 评分数 |

特别感谢

SVG 图标支持: Yuki