awesome-vue-star-rating是一款纯vue评分插件,它可以自定义的评分和评分说明,自定义的星数等,简单易用。
使用方法
awesome-vue-star-rating评分组件基于vue2实现,它的特点有:
- 字体图标星星-缩放而不会损失质量
- 可自定义的评分和评分说明
- 选定值和描述的可定制结果
- 可自定义的星数
- 创建只读星
- 可自定义的颜色
安装
// npm
npm install --save awesome-vue-star-rating
使用
配置参数
| 参数 | 类型 | 是否必须 | 描述 |
| star | Number | 是 | 星星的数量,默认为2 |
| maxstars | Number | 是 | 星星的最大数量,默认为5 |
| hasresults | Boolean | 否 | 是否显示结果信息,默认为true |
| hasdescription | Boolean | 否 | 是否显示描述信息,默认为true |
| ratingdescription | Array | 是 | 显示的描述信息,是个对象数组,具体示例参看下方 |
| starsize | String | 否 | 星星的尺寸,默认为lg,可选值有:[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x] |
| disabled | Boolean | 否 | 星星是否可以选择,默认为false |
ratingdescription参数示例:
[
{
text: 'Poor',
class: 'star-poor'
},
{
text: 'Below Average',
class: 'star-belowAverage'
},
{
text: 'Average',
class: 'star-average'
},
{
text: 'Good',
class: 'star-good'
},
{
text: 'Excellent',
class: 'star-excellent'
}]