Skip to content

luyilin/vue-cute-rate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-cute-rate

NPM version NPM downloads CircleCI

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

Releases

No releases published

Packages

No packages published