# Rate 评分

# Rate 概述

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

# Rate 代码演示

# 基础用法

基础用法

3 星

<template>
  <div>
    <div>
      {{ value }}
      <h-rate v-model="value"></h-rate>
    </div>
    {{ value1 }}
    <h-rate
      v-model="value1"
      :count="10"
      show-text
      @on-change="change"
      allow-half
    ></h-rate>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 0,
      value1: 3,
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
  },
};
</script>

复制代码

# 半星

设置属性 allow-half 可以选中半星。

<template>
  <h-rate allow-half v-model="valueHalf"></h-rate>
</template>
<script>
export default {
  data() {
    return {
      valueHalf: 2.5,
    };
  },
};
</script>

复制代码

# 显示提示

设置属性 show-text 可以显示提示文字。
提示内容也可以通过 slot 自定义。

3 星

3.8

<template>
  <h-row>
    <!-- 显示提示文字 -->
    <h-col span="12">
      <h-rate show-text v-model="valueText"></h-rate>
    </h-col>
    <!-- 自定义要显示的提示文字 -->
    <h-col span="12">
      <h-rate show-text v-model="valueCustomText">
        <span style="color: #f5a623;">{{ valueCustomText }}</span>
      </h-rate>
    </h-col>
  </h-row>
</template>
<script>
export default {
  data() {
    return {
      valueText: 3,
      valueCustomText: 3.8,
    };
  },
};
</script>

复制代码

# 只读

设置属性 disabled 开启只读模式，无法交互。

<template>
  <h-rate disabled v-model="valueDisabled"></h-rate>
</template>
<script>
export default {
  data() {
    return {
      valueDisabled: 2,
    };
  },
};
</script>

复制代码

# 文字

设置属性 character 使用文字评分。

好好

2.5 星

<template>
  <Rate allow-half show-text v-model="characterValue" character="好" />
</template>
<script>
export default {
  data() {
    return {
      characterValue: 2.5,
    };
  },
};
</script>

复制代码

# Rate API

# Rate props

属性	说明	类型	默认值
count	star 总数	Number	5
value	当前 star 数，可以使用 v-model 双向绑定数据	Number	0
allow-half	是否允许半选	Boolean	false
disabled	是否只读，无法进行交互	Boolean	false
show-text	是否显示提示文字	Boolean	false
clearable	是否可以取消选择	Boolean	false
icon	更换评分图标时使用评分图标的 name 名称，和 Icon 组件中写入的 name 名称一样	String	''
character	需要将评分图标换成评分文字时时候用	String	''

# Rate events

事件名	说明	返回值
on-change	评分改变时触发	value