Rate

评分组件。

何时使用

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

代码演示

基本

最简单的用法。

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

半星

支持选中半星。

<template>
  <a-rate :defaultValue="2.5" allowHalf />
</template>

文案展现

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

<template>
  <span>
    <a-rate :tooltips="desc" v-model="value" />
    <span class="ant-rate-text">{{desc[value - 1]}}</span>
  </span>
</template>
<script>
  export default {
    data() {
      return {
        value: 3,
        desc: ['terrible', 'bad', 'normal', 'good', 'wonderful'],
      };
    },
  };
</script>

只读

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

<template>
  <a-rate :defaultValue="2" disabled />
</template>

清除

支持允许或者禁用清除。

<template>
  <div>
    <a-rate :defaultValue="3" /> allowClear: true
    <br />
    <a-rate :allowClear="false" :defaultValue="3" /> allowClear: false
    <br />
  </div>
</template>

其他字符

可以将星星替换为其他字符，比如字母，数字，字体图标甚至中文。

<template>
  <div>
    <a-rate allowHalf>
      <a-icon slot="character" type="heart" />
    </a-rate>
    <br />
    <a-rate character="A" allowHalf style="fontSize: 36px" />
    <br />
    <a-rate character="好" allowHalf />
    <br />
  </div>
</template>

API

事件

方法