Fuse Design Rate评分组件

评分组件，可用于对评价进行展示以及对事物进行快速的评级操作。

代码演示

1. 基本用法 最简单的使用方式，示例代码如下：

<template>
  <a-rate v-model:value="value" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref<number>(2);
</script>

2. 半星 支持选中半星，代码如下：

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

3. 文案展现 给评分组件添加文案展示：

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" setup>
import { ref } from 'vue';
const value = ref<number>(3);
const desc = ref<string[]>(['terrible', 'bad', 'normal', 'good', 'wonderful']);
</script>

4. 只读 设置为只读，无法进行鼠标交互：

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

5. 清除 支持允许或者禁用清除功能：

allowClear: true

allowClear: false

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

6. 其他字符 可以将星星替换为其他字符，如字母、数字、字体图标甚至中文：

• A

  A
• A

  A
• A

  A
• A

  A
• A

  A

• 好

  好
• 好

  好
• 好

  好
• 好

  好
• 好

  好

<template>
  <div>
    <a-rate v-model:value="value1" allow-half>
      <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" setup>
import { HeartOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
const value1 = ref<number>(2);
const value2 = ref<number>(2.5);
const value3 = ref<number>(0.5);
</script>

API

属性	说明	类型	默认值
allowClear	是否允许再次点击后清除	boolean	true
allowHalf	是否允许半选	boolean	false
autofocus	自动获取焦点	boolean	false
character	自定义字符	string | slot	<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()	获取焦点