ra-star-rating

🌟 A simple star rating component for vue.js. Perhaps, each can have its own rating star component.

Demo

• demo

Install.

# yarn 
yarn add ra-star-rating

# npm
npm install --save ra-star-rating

Usage.

import raStarRating from 'ra-star-rating'

<ra-star-rating config></ra-star-rating>

期望配置 https://github.com/PRNDcompany/ReactSvgStarRating

props

| Props | Description | Default | | ----------- | ------------------------------------------------------------ | ------- | | mode | 分数增量。目前只支持[1,0.5,0.01]。1表示每次点击为一颗星，0.5表示半颗星,0.01即随着鼠标移动 | 1 | | rating | 初始评分 | 0 | | order | 星星评分顺序。支持从左往右|从右往左['ltr', 'rtl'] | 'ltr' | | star-points | 星星数量。也表示最大评分 | 5 | | readOnly | 只读模式。 | false | | stroke | stroke stroke-width stroke-linecap stroke-dasharray 属性 | {} | | emptyColor | 星星非突出显示部分的颜色 | null | | fillColor | 星星突出显示部分的颜色 | false | | size | 星星的大小 | 50 | | zoom | 星星的缩放比例，建议为radio的两倍 | 4 | | ratio | 内圆和外圆的比例，决定星星的风格，建议为2 & 2.5 | 2 | | padding | 星星的padding，使得更加容易确定min分或者max | 5 |

TODO

• [x] 星星绘图
• [x] 支持颜色填充
• [ ] 支持渐变颜色
• [x] 支持自定义配置星星数量
• [x] 支持星星大小配置
• [x] 支持评分方向（左侧|右侧）
• [x] 支持半星评分
• [x] 支持小数（百分比）评分
• [x] 支持星星自定义样式修改
• [ ] 支持星星旋转
• [x] 支持只读模式
• [ ] 支持反馈评分数
• [ ] 支持AMD引入

Process

Process

MIT

MIT