vue-cute-rate

Rate with star, heart, emoji or anything you like.

See the beautiful doc for vue-cute-rate. Powered by kokk 🍹

Install

yarn add vue-cute-rate --save

CDN: UNPKG | jsDelivr (available as window.rate)

API

See the doc for live demo and details.

| Property | Description | type | Default | | -------- | ----------- | ---- | ------- | | count | star count | number | 5 | | value / v-model | current value | number | 0 | | star-half | whether to allow semi selection | boolean | false | | disabled | read only, unable to interact | boolean | false | | disabled-cursor | set mouse cursor to not-allowed when hover a read only element | boolean | false | | allow-clear | whether to allow clear when click again | boolean | true | | font-size | set the font size of character | string | 22px | | type | there are 3 cute types of iconfont by default, star star1 and heart | string | star | | hover-change | support set hover-change to change value when hover | boolean | false | | active-color | color of the active values | string | #fadb14 | | inactive-color | color of the inactive values | string | #e9e9e9 | | hover-color | color when hover a value | string | same as activeColor by default | | inactive-char | the inactive character, only rendered when use a customChar slot | string | - (hyphen) | | on-hover-change | callback when hover item | Function(value: number) | - | | on-change | callback when select value | Function(value: number) | - |

slot

rateChar

Use the slot when replace the default star to other character like alphabet, digit, iconfont or anything which can be controled by color.

The slot name is rateChar, and make sure to write slot-scope="props" :class="props.computeClass" as well. We need Scoped Slots and compute classnames by props.

customChar

Use the slot when replace the default star to other character like image, Unicode, or anything which cannot be controled by color. At the same time, you may want to set the inactive character.

The slot name is customChar, and make sure to write slot-scope="props" :class="props.computeClass" as well. We need Scoped Slots and compute classnames by props.

License

MIT © luyilin

minemine.cc · GitHub @luyilin · Twitter @luyilin12