vue星星评分组件

Vue 2.x的星级评定组件 (Star Rating Component for Vue 2.x)

Need more than stars? Check out vue-rate-it with hundreds of different raters built in!

需要更多星星吗？ 查看vue-rate-it，其中内置了数百种不同的评估者！

A simple, highly customisable star rating component for Vue 2.x.

Vue 2.x的简单，高度可定制的星级评定组件。

特征： (Features:)

• SVG stars - scale without loss of quality.

  SVG星-缩放而不会损失质量。

• Customisable rating increments.

  可自定义的评分增量。

• Customisable colors.

  可自定义的颜色。

• Customisable number of stars.

  可自定义的星数。

• Create read-only stars.

  创建只读星。

用法 (Usage)

通过NPM (Via NPM)

Install via npm:

通过npm安装：

npm install vue-star-rating

npm install vue-star-rating

Then require in your project:

然后在您的项目中要求：

var StarRating = require('vue-star-rating');

var StarRating = require('vue-star-rating');

or ES6 syntax:

或ES6语法：

import StarRating from 'vue-star-rating'

import StarRating from 'vue-star-rating'

Then you can register the component globally:

然后，您可以全局注册该组件：

Vue.component('star-rating', StarRating);

Vue.component('star-rating', StarRating);

Or in your Vue component:

或在您的Vue component ：

components: {
  StarRating
}

You can then use the following markup in your project:

然后，您可以在项目中使用以下标记：

<star-rating></star-rating>

<star-rating></star-rating>

通过CDN (Via CDN)

You may also include vue-star-rating directly in to your webpage via Unpkg. Simply add the following script tag:

您还可以通过Unpkg将vue-star-rating直接添加到您的网页中。 只需添加以下脚本标记：

<script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>

<script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>

You will need to register the component by doing:

您将需要通过以下方式注册组件：

Vue.component('star-rating', VueStarRating.default);

You may also register the component locally via the components option.

您也可以通过components选项在本地注册该组件。

入门 (Getting Started)

To get started with vue-star-rating you will want to sync the rating values between the component and parent, you can then take a look at the props and custom events section of the docs to customise your star-rating component.

要开始使用vue-star-rating您需要在组件和父组件之间同步评级值，然后可以查看文档的props和custom events部分，以自定义您的star-rating组件。

将Vue 2.2 +的额定值与V模型同步 (Syncing Rating Values with V-Model for Vue 2.2 +)

vue-star-rating supports v-model when using Vue 2.2 and above, which is the simplest way to keep your ratings in sync:

当使用Vue 2.2及更高版本时， vue-star-rating支持v-model ，这是保持评分同步的最简单方法：

<star-rating v-model="rating"></star-rating>

See this example on JSFiddle

在JSFiddle上查看此示例

使用Vue 2.1.x及以下版本时同步评级值 (Syncing Rating Values when using Vue 2.1.x and below)

If you are using Vue 2.1.x or below the following is the equivelent to the v-model example above:

如果您使用的是Vue 2.1.x或更低版本，则以下内容与上述v-model示例等效：

<star-rating @rating-selected="rating = $event" :rating="rating"></star-rating>

See this example on JSFiddle

在JSFiddle上查看此示例

文件 (Docs)

道具 (Props)

The following props can be passed to the component:

可以将以下道具传递给组件：

一般道具 (General Props)

These props provide general functionailty to the star rating component

这些道具可为星级评分组件提供一般功能

Prop	Description	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.	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	0
max-rating	The maximum rating, this lets vue-star-rating know how many stars to display	5
star-points	The points defining a custom star shape. If no points are passed the default star shape is used.	[]
read-only	When set to true, the rating cannot be edited. Use in conjuction with increment to define rounding precision.	false
show-rating	Whether or not to show the rating next to the stars	true
fixed-points	Specify a fixed number of digits after the decimal point.	null
rtl	Pass true to display star rating using rtl (right-to-left)	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.	true

Struts	描述	默认
增量	额定增量，例如半星通过0.5或流星通过0.01。 期望介于0.01-1之间的数字。	1个
评分	初始评分，它将自动四舍五入为最接近的增量，因此对于最准确的评分，将0.01作为增量传递，或将round-start-rating道具设置为false	0
最高评分	最高评级，这使vue-star-rating知道要显示多少颗星	5
星点	定义自定义星形的点。 如果未传递任何点，则使用默认的星形。	[]
只读	设置为true时，无法编辑等级。 结合使用以increment定义舍入精度。	假
显示等级	是否在星号旁边显示评分	真正
定点	在小数点后指定固定位数。	空值
rtl	使用rtl传递true以显示星级(从右到左)	假
全面启动评级	如果您不希望起始评级值舍入到最接近的增量，则传递false。 用户仍然只能基于给定的增量进行选择。	真正

风格道具 (Style Props)

These props are used to style the star rating component

这些道具用于设置星级组件的样式

Prop	Description	Default
star-size	The size of each star, this gets passed to the SVG width attribute, so larger numbers are larger stars	50
inactive-color	The color of the non-highlighted portion of a star.	#d8d8d8
active-color	The color of the highlighted portion of a star.	#ffd055
border-color	Sets the colour of the border for each star	#999
border-width	Sets the width of the border for each star	0
padding	Pads the right of each star so distance between stars can be altered	0
rounded-corners	Whether or not to round the star's corners	false
inline	Sets the star rating to display inline	false
glow	Adds a subtle glow around each active star, this should be a number to spread the glow	0
glow-color	Sets the color for the glow (note, this effect can be very subtle)	#000
text-class	A css class name to style the rating text for a specific star rating component	''

Struts	描述	默认
星型	每颗恒星的大小，这将传递给SVG width属性，因此较大的数字表示较大的恒星	50
无效颜色	星星非突出显示部分的颜色。	＃d8d8d8
活性色	星形突出显示部分的颜色。	＃ffd055
边框颜色	设置每个星星的边框颜色	＃999
边框宽度	设置每个星星的边框宽度	0
填充	在每颗恒星的右边进行填充，以便改变恒星之间的距离	0
圆角	是否绕过星星的角落	假
排队	设置星级以在线显示	假
辉光	在每个活动恒星周围添加微妙的辉光，该数字应为散布该辉光的数字	0
发光色	设置发光的颜色(请注意，此效果可能非常微妙)	＃000
文字课	CSS类名称，用于为特定星级评分组件设置评分文本的样式	''

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.

重要提示：Vue公司要求你通过数字和使用布尔值v-bind ，需要一个数字或布尔应该使用任何道具v-bind:或冒号( : )的简写。

道具示例 (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>

自订活动 (Custom Events)

vue-star-rating fires the following custom events, simply use v-on:event or the @ shortand to capture the event.

vue-star-rating会触发以下自定义事件，只需使用v-on:event或@ shortand即可捕获该事件。

Event	Description	Return Value
rating-selected	Returns the rating the user selects via the click event	rating
current-rating	Returns the rating that the users mouse is currently over	rating

事件	描述	返回值
评级选择	返回用户通过点击事件选择的等级	评分
目前评级	返回用户鼠标当前停留在的等级	评分

自定义事件示例 (Custom Events Example)

<star-rating @rating-selected ="setRating"></star-rating>

Then in your view model:

然后在您的视图模型中：

new Vue({
  el: '#app',
  methods: {
    setRating: function(rating){
      this.rating= rating;
    }
  },
  data: {
    rating: 0
  }
});

Note: When writing methods to capture custom events, the rating param is automatically passed to the method. If you need to declare methods with multiple paramaters you will need to use $event to pass the rating to the method:

注意：在编写捕获自定义事件的方法时，评级参数会自动传递给该方法。 如果需要声明具有多个参数的方法，则需要使用$event将等级传递给该方法：

<star-rating @current-rating="setCurrentRating($event, anotherParam)"></star-rating>

IE9支持 (IE9 Support)

vue-star-rating supports IE 9+; make sure you place the following in the head of your webpage to ensure that IE is in standards mode:

vue-star-rating支持IE 9+； 确保将以下内容放在网页的head ，以确保IE处于标准模式：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

翻译自: https://vuejsexamples.com/a-simple-and-highly-customisable-star-rating-component-for-vue/

vue星星评分组件