Rate 评分

评分组件。

何时使用

对评价进行展示。对事物进行快速的评级操作。

代码演示

基本

最简单的用法。

  1. <template>
  2. <v-rate v-model="star1" @change="_change"></v-rate>
  3. </template>
  4. <script>
  5. export default {
  6. data: function() {
  7. return {
  8. star1: 1
  9. };
  10. },
  11. methods: {
  12. _change(val) {
  13. console.log('selected:' + val);
  14. }
  15. }
  16. }
  17. </script>

半星

支持选中半星。

  1. <template>
  2. <v-rate allow-half :value='2.5'></v-rate>
  3. </template>

文案展示

给评分组件加上文案展示。

  1. <template>
  2. <v-rate v-model='star2' @change="_change">
  3. <span class='ant-rate-text'>{{ star2 }}星</span>
  4. </v-rate>
  5. </template>
  6. <script>
  7. export default {
  8. data: function() {
  9. return {
  10. star2: 6
  11. };
  12. },
  13. methods: {
  14. _change(val) {
  15. console.log('selected:' + val);
  16. }
  17. }
  18. }
  19. </script>

只读

只读,无法进行鼠标交互。

  1. <template>
  2. <v-rate disabled :value='2'></v-brate>
  3. </template>

API

Rate Props

属性说明类型默认值
countstar 总数Number5
value当前值,如果输入值超过 count 会被强制转换成count值Number0
allowHalf是否允许半选Booleanfalse
disabled只读,无法进行交互Booleanfalse

Rate Events

事件名称说明回调参数
change选择的值发生变化的时候触发value