Rate 评分

评分组件。

何时使用

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

代码演示

基本用法

最简单的用法。

<template>
  <a-rate v-model:value="value" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<number>(2);
    return {
      value,
    };
  },
});
</script>
normal
文案展现

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

<template>
  <span>
    <a-rate v-model:value="value" :tooltips="desc" />
    <span class="ant-rate-text">{{ desc[value - 1] }}</span>
  </span>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<number>(3);
    const desc = ref<string[]>(['terrible', 'bad', 'normal', 'good', 'wonderful']);
    return {
      value,
      desc,
    };
  },
});
</script>
allowClear: true
allowClear: false
清除

支持允许或者禁用清除。

<template>
  <div>
    <a-rate v-model:value="value1" />
    <span class="ant-rate-text">allowClear: true</span>
    <br />
    <a-rate :allow-clear="false" v-model:value="value2" />
    <span class="ant-rate-text">allowClear: false</span>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value1 = ref<number>(3);
    const value2 = ref<number>(3);
    return {
      value1,
      value2,
    };
  },
});
</script>
半星

支持选中半星。

<template>
  <a-rate v-model:value="value" allow-half />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<number>(2.5);
    return {
      value,
    };
  },
});
</script>
只读

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

<template>
  <a-rate :value="2" disabled />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>

  • A
    A
  • A
    A
  • A
    A
  • A
    A
  • A
    A

  • 好
    好
  • 好
    好
  • 好
    好
  • 好
    好
  • 好
    好

其他字符

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

<template>
  <div>
    <a-rate v-model:value="value1" allowHalf>
      <template #character>
        <heart-outlined />
      </template>
    </a-rate>
    <br />
    <a-rate v-model:value="value2" character="A" allow-half style="font-size: 36px" />
    <br />
    <a-rate v-model:value="value3" character="好" allow-half />
    <br />
  </div>
</template>
<script lang="ts">
import { HeartOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value1 = ref<number>(2);
    const value2 = ref<number>(2.5);
    const value3 = ref<number>(0.5);
    return {
      value1,
      value2,
      value3,
    };
  },
  components: {
    HeartOutlined,
  },
});
</script>

API#

属性 说明 类型 默认值
allowClear 是否允许再次点击后清除 boolean true
allowHalf 是否允许半选 boolean false
autofocus 自动获取焦点 boolean false
character 自定义字符 String or slot="character" <StarOutlined />
count star 总数 number 5
disabled 只读，无法进行交互 boolean false
tooltips 自定义每项的提示信息 string[] -
value(v-model) 当前数，受控值 number -

事件

事件名称 说明 回调参数
blur 失去焦点时的回调 Function()
change 选择时的回调 Function(value: number)
focus 获取焦点时的回调 Function()
hoverChange 鼠标经过时数值变化的回调 Function(value: number)
keydown 按键回调 Function(event)

方法

名称 描述
blur() 移除焦点
focus() 获取焦点