Rate 评分

评分组件

基础用法

最简单的用法。

Rate评分 - 图1

  1. <at-rate></at-rate>

文案展现

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

Rate评分 - 图2

  1. <at-rate :show-text="true" v-model="value2">
  2.   <span>{{ value2 }} 星</span>
  3. </at-rate>

其他图标

可以将星星替换为其他图标。

Rate评分 - 图3

<at-rate icon="icon-heart-on"></at-rate>

半星

支持选中半星。

Rate评分 - 图4

<div >
  <at-rate
    :allow-half="true"
    :show-text="true"
    :value="value1"
    @on-change="changeHandle">
  </at-rate>
</div>

只读

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

Rate评分 - 图5

<div >
  <at-rate
    :allow-half="true"
    :show-text="true"
    :value="value1"
    :disabled="true">
  </at-rate>
</div>

Rate 参数

参数说明类型可选值默认值
countstar 总数Number-5
value当前值String-0
allow-half是否允许选择半颗星Boolean-false
disabled只读，无法进行交互Boolean-false
icon指定图标String-icon-star
show-text实现显示辅助文案Boolean-false

Rate 事件

事件名称说明返回值
on-changestar 数目改变时触发改变后的值
on-hover-change鼠标在 star 上移动导致数值变化时触发改变后的值

Rate slot

名称说明
-自定义展示文案的内容