Rate 评分

评分组件

基础用法

<!--你可以为 model 绑定整数变量-->
<!--通过绑定 (modelChange)=handle 来获得每次值改变的触发-->
<div class="rate-demo">
  <div class="block">
    <span class="demonstration">默认不区分颜色</span>
    <el-rate [model]="4"></el-rate>
  </div>
  
  <div class="block">
    <span class="demonstration">区分颜色</span>
    <el-rate [model]="2"
      [colors]="['#99A9BF', '#F7BA2A', '#FF9900']" notes=" ">
    </el-rate>
  </div>
</div>

辅助文字

用辅助文字直接地表达对应分数

设置 [show-text] 属性会在右侧显示辅助文字

<!--通过设置 [texts] 可以为每一个分值指定对应的辅助文字。-->
<!-- [texts] 为一个数组，长度应等于最大值 [max] -->
<el-rate [model]="3" [show-text]="true">
</el-rate>

其它 icon

当有多层评价时，可以用不同类型的 icon 区分评分层级

<el-rate [model]="1"
  [icon-classes]="['el-icon-circle-check', 'el-icon-circle-check', 'el-icon-circle-check']"
  [void-icon-class]="'el-icon-circle-check'"
  [colors]="['#FF9900', '#FF9900', '#FF9900']" notes=" ">
</el-rate>

只读

只读的评分用来展示分数

为组件设置 elDisabled 属性表示组件为只读

<el-rate
  [model]="3"
  [elDisabled]="true"
  [show-text]="true"
  [text-color]="'#ff9900'">
</el-rate>

Rate Attributes