评分 Rate

用于评分或打星操作，支持半星评分、自定义图标、只读和禁用状态。

基础用法

通过 v-model 绑定评分值，默认 5 颗星。

<template>
  <bp-rate v-model="val" :count="5"></bp-rate>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const val = ref(2.5);
</script>

半星评分

通过 half 属性开启半星评分，鼠标移动到星星左半部分为半星，右半部分为整星。

整星评分

半星评分

当前值：2.5

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <div>
      <div class="label">整星评分</div>
      <bp-rate v-model="val1" />
    </div>
    <div>
      <div class="label">半星评分</div>
      <bp-rate v-model="val2" half />
    </div>
    <div>
      <div class="label">当前值：{{ val2 }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val1 = ref(3);
const val2 = ref(2.5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

自定义总数

通过 count 属性设置星星总数。

5 颗星（默认）

8 颗星

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">5 颗星（默认）</div>
      <bp-rate v-model="val1" />
    </div>
    <div>
      <div class="label">8 颗星</div>
      <bp-rate v-model="val2" :count="8" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val1 = ref(3);
const val2 = ref(5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

自定义图标

通过 icon 插槽自定义评分图标，插槽参数 { index } 为当前图标索引。

自定义爱心图标

自定义点赞图标

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">自定义爱心图标</div>
      <bp-rate v-model="val1">
        <template #icon>
          <IconHeartFill style="color: #f53f3f" />
        </template>
      </bp-rate>
    </div>
    <div>
      <div class="label">自定义点赞图标</div>
      <bp-rate v-model="val2">
        <template #icon>
          <IconThumbUpFill style="color: #165dff" />
        </template>
      </bp-rate>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { IconHeartFill, IconThumbUpFill } from "birdpaper-icon";

const val1 = ref(3);
const val2 = ref(4);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

只读与禁用

通过 readonly 属性设置只读状态，disabled 属性设置禁用状态。

只读

禁用

只读半星

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">只读</div>
      <bp-rate v-model="val" readonly />
    </div>
    <div>
      <div class="label">禁用</div>
      <bp-rate v-model="val" disabled />
    </div>
    <div>
      <div class="label">只读半星</div>
      <bp-rate v-model="halfVal" readonly half />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref(3);
const halfVal = ref(3.5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Rate 属性

v-model	绑定值	Number	-	-
count	总数	Number	5	-
half	是否支持半选	Boolean	-	-
readonly	是否只读	Boolean	-	-
disabled	是否禁用	Boolean	-	-

Rate 插槽

icon

自定义图标

{ index: number }

-