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 的插槽

事件