Rate

评分组件。

何时使用

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

代码演示

Rate 评分 - 图1

基本

最简单的用法。

  1. <template>
  2. <a-rate v-model="value" />
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. value: 2,
  9. };
  10. },
  11. };
  12. </script>

Rate 评分 - 图2

半星

支持选中半星。

  1. <template>
  2. <a-rate :defaultValue="2.5" allowHalf />
  3. </template>

Rate 评分 - 图3

文案展现

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

  1. <template>
  2. <span>
  3. <a-rate :tooltips="desc" v-model="value" />
  4. <span class="ant-rate-text">{{desc[value - 1]}}</span>
  5. </span>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. value: 3,
  12. desc: ['terrible', 'bad', 'normal', 'good', 'wonderful'],
  13. };
  14. },
  15. };
  16. </script>

Rate 评分 - 图4

只读

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

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

Rate 评分 - 图5

清除

支持允许或者禁用清除。

  1. <template>
  2. <div>
  3. <a-rate :defaultValue="3" /> allowClear: true
  4. <br />
  5. <a-rate :allowClear="false" :defaultValue="3" /> allowClear: false
  6. <br />
  7. </div>
  8. </template>

Rate 评分 - 图6

其他字符

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

  1. <template>
  2. <div>
  3. <a-rate allowHalf>
  4. <a-icon slot="character" type="heart" />
  5. </a-rate>
  6. <br />
  7. <a-rate character="A" allowHalf style="fontSize: 36px" />
  8. <br />
  9. <a-rate character="好" allowHalf />
  10. <br />
  11. </div>
  12. </template>

API

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

事件

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

方法

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