vue3 | vue-star-rating插件 | 五星评分插件 | 精度为0.01

官网：www.npmjs.com/package/vue…

效果图

demo集合 codepen.io/craigh411/p…

安装

npm install vue-star-rating@next

General Props

These props provide general functionailty to the star rating component

Prop	Description	Type	Default
increment	The rating increment, for example pass 0.5 for half stars or 0.01 for fluid stars. Expects a number between 0.01 - 1.	Number	1
rating	The initial rating, this will automatically round to the closest increment, so for the most accurate rating pass 0.01 as increment or set the round-start-rating prop to false	Number	0
max-rating	The maximum rating, this lets vue-star-rating know how many stars to display	Number	5
star-points	The points defining a custom star shape. If no points are passed the default star shape is used.	Array	[]
read-only	When set to true, the rating cannot be edited. Use in conjuction with increment to define rounding precision.	Boolean	false
show-rating	Whether or not to show the rating next to the stars	Boolean	true
fixed-points	Specify a fixed number of digits after the decimal point.	Number	null
rtl	Pass true to display star rating using rtl (right-to-left)	Boolean	false
round-start-rating	Pass false if you don't want the start rating value to round to the closest increment. The user will still only be able to select based on the given increment.	Boolean	true
clearable	When set to true a second click on the same rating clears the rating	Boolean	false
active-on-click	When set to true only apply active colors when the user clicks the star, rather than on mouseover.	Boolean	false

Style Props

These props are used to style the star rating component

Prop	Description	Type	Default
star-size	The size of each star, this gets passed to the SVG width attribute, so larger numbers are larger stars	Number	50
inactive-color	The color of the non-highlighted portion of a star.	String	#d8d8d8
active-color	The color of the highlighted portion of a star. Pass an array of colors to color each star individually	String	Array	#ffd055
border-color	Sets the colour of the border for each star	String	#999
active-border-color	The border color of a highlighted star. Pass an array of colors to color each star's border individually	String	Array	null
border-width	Sets the width of the border for each star	Number	0
animate	Set to true for an animation to be applied on mouseover	Boolean	false
padding	Pads the right of each star so distance between stars can be altered	Number	0
rounded-corners	Whether or not to round the star's corners	Boolean	false
inline	Sets the star rating to display inline	Boolean	false
glow	Adds a subtle glow around each active star, this should be a number to spread the glow	Number	0
glow-color	Sets the color for the glow	String	#fff
text-class	A css class name to style the rating text for a specific star rating component	String	''

Important:  Vue requires you to pass numbers and boolean values using v-bind, any props that require a number or bool should use v-bind: or the colon (:) shorthand.

Props Example

<star-rating v-bind:increment="0.5"
             v-bind:max-rating="3"
             inactive-color="#000"
             active-color="#f00"
             v-bind:star-size="90">
</star-rating>