Rate

1.5.0 新增

评分组件。你可以自定义星星个数，可以禁用交互，以用作评价展示，可以通过插槽自定义星星样式。

示例

基本用法

使用 v-model 对评分值双向绑定。

<cube-rate v-model="value"></cube-rate>

export default {
  data() {
    return {
      value: 3
    }
  }
}

多项配置

例如，使用disabled使评分组件只读，使用max自定义评分等级，使用 justify 决定是否自动适应容器宽度。

<cube-rate v-model="value" :disabled="disabled" :max="max" :justify="justify"></cube-rate>

export default {
  data() {
    return {
      disabled: false,
      max: 5,
      value: 3,
      justify: false
    }
  }
}

自定义星星样式

需要使用cube-rate-item组件，并且对自定义的星星元素定义两种样式——普通和活跃（在.cube-rate-item.active类之下）。

<cube-rate v-model="value">
  <cube-rate-item v-for="n in max" :key="n" :value="value" :index="n">
    <!-- 定制星星示例 -->
    <div class="rate-item"></div>
  </cube-rate-item>
</cube-rate>

export default {
  data() {
    return {
      value: 3
    }
  }
}

.rate-item
  width: 100%
  height: 100%
  background-size: 100%
  background-color: grey
.cube-rate-item.active
  .rate-item
    background-color: orange

Props 配置

插槽

cube-rate-item 的插槽

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/rate