Ant Design Vue Rate 评分打分5星组件

Ant Design Vue Rate 评分组件可以使用在对服务评分打分，本文列出了常用的属性及用法。

常用属性

属性名称	属性说明	类型	默认值
allowHalf	是否允许半选、半颗星	boolean	false
count	总数,显示多少颗星	number	5
defaultValue	默认值,CDN引入JS方式是 default-value	number	0
disabled	是否只读	boolean	false
value(v-model)	当前数，受控值	number	0

基本用法

<template>
  <a-rate  v-model="value" count="10"/>
</template>
<script>
export default {
  data() {
    return {
      value: 2,
    };
  },
};
</script>

例子

设置半星

<template>
  <a-rate :default-value="2.5" allow-half />
</template>

例子

设置提示

<template>
  <span>
    <a-rate v-model="value" :tooltips="tips" @change="onChange"/> 
  </span>
</template>
<script>
export default {
  data() {
    return {
      value: 3,
      tips: ['不满意', '糟糕', '一般', '优秀', '非常满意'],
    };
  },
   methods: {
          //选中事件
          onChange(value) {
            alert('你打了'+value+'分');
          },
    },
};
</script>

例子

自定义图标或文字

必须打分即无法打零分

<template>
  <span>
    <a-rate v-model="value" :tooltips="tips" @change="onChange">
      <a-icon slot="character" type="heart"></a-icon>
    </a-rate> 
  </span>
</template>

例子

设置必须评分

<template>
  <span>
    <a-rate v-model="value" :allowClear="false" :tooltips="tips" @change="onChange">
      <a-icon slot="character" type="heart"></a-icon>
    </a-rate> 
  </span>
</template>
<script>
export default {
  data() {
    return {
      value: 3,
      tips: ['不满意', '糟糕', '一般', '优秀', '非常满意'],
    };
  },
   methods: {
          //选中事件
          onChange(value) {
            alert('你打了'+value+'分');
          },
    },
};
</script>

例子