评分 Rate

用于评分或打星的组件。

基本用法

最简单的用法，点击星星进行评分。

---

代码事例

<template>
  <fk-space>
    <fk-rate v-model="value1" />
    <fk-rate v-model="value2" allow-half />
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value1: 3,
      value2: 2.5
    };
  }
};
</script>

半选

支持选中半颗星，通过 allow-half 属性开启。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value" allow-half />
    <div>当前值: {{ value }}</div>
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value: 2.5
    };
  }
};
</script>

自定义颜色

通过 color 属性可以自定义星星的颜色。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value1" color="#fadb14" />
    <fk-rate v-model="value2" :color="{ filled: '#ff4d4f', unfilled: '#d9d9d9' }" />
    <fk-rate v-model="value3" color="#52c41a" />
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value1: 3,
      value2: 4,
      value3: 2
    };
  }
};
</script>

只读

通过 readonly 属性设置为只读状态，用户无法交互。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value1" readonly />
    <fk-rate v-model="value2" readonly allow-half />
    <fk-rate v-model="value3" readonly disabled />
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value1: 3.5,
      value2: 2,
      value3: 4
    };
  }
};
</script>

允许清除

通过 allow-clear 属性允许用户清除评分。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value" allow-clear />
    <div>当前值: {{ value }}</div>
    <div>点击已选中的星星可以清除评分</div>
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value: 3
    };
  }
};
</script>

自定义字符

通过 character 插槽可以自定义星星的字符。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value1">
      <template #character="{ index }">
        <icon-heart-fill v-if="index < value1" />
        <icon-heart v-else />
      </template>
    </fk-rate>
    
    <fk-rate v-model="value2">
      <template #character>
        A
      </template>
    </fk-rate>
    
    <fk-rate v-model="value3">
      <template #character="{ index }">
        <span v-if="index < value3">😊</span>
        <span v-else>😐</span>
      </template>
    </fk-rate>
  </fk-space>
</template>

<script>
import { IconHeart, IconHeartFill } from '@erp/common';

export default {
  components: { IconHeart, IconHeartFill },
  data() {
    return {
      value1: 3,
      value2: 2,
      value3: 4
    };
  }
};
</script>

自定义数量

通过 count 属性可以自定义星星的数量。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value1" :count="3" />
    <fk-rate v-model="value2" :count="6" />
    <fk-rate v-model="value3" :count="10" />
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value1: 2,
      value2: 4,
      value3: 7
    };
  }
};
</script>

笑脸分级

通过 grading 属性开启笑脸分级显示。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-rate v-model="value1" grading />
    <fk-rate v-model="value2" grading allow-half />
    <div>当前评分: {{ value1 }} - {{ getGradeText(value1) }}</div>
  </fk-space>
</template>

<script>
export default {
  data() {
    return {
      value1: 3,
      value2: 4.5
    };
  },
  methods: {
    getGradeText(value) {
      if (value <= 1) return '很差';
      if (value <= 2) return '较差';
      if (value <= 3) return '一般';
      if (value <= 4) return '较好';
      return '很好';
    }
  }
};
</script>

API

<rate> Props

参数名	描述	类型	默认值	版本
count	评分的总数	number	5
model-value (v-model)	绑定值	number	-
default-value	默认值	number	0
allow-half	是否允许半选	boolean	false
allow-clear	是否允许清除	boolean	false
grading	是否开启笑脸分级	boolean	false
readonly	是否为只读状态	boolean	false
disabled	是否禁用	boolean	false
color	颜色	string | Record<string, string>	-	1.0.0

<rate> Events

事件名	描述	参数
change	值改变时触发	value: number
hover-change	鼠标移动到数值上时触发	value: number

<rate> Slots

插槽名	描述	参数
character	符号	index: number