• Rate
    • 何时使用
    • 代码演示
      • 基本
      • 半星
      • 文案展现
      • 只读
      • 清除
      • 其他字符
  • API
    • 事件
  • 方法

    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()获取焦点