Vue-cute-rate NPM

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.