Rate 评分

评分组件 （Element Rate 评分）

基础用法

默认不区分颜色
区分颜色
指定大小，默认单位px
指定大小，单位rem
评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过 colors 属性设置，而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。（low-threshold 和 high-threshold 作用于 colors 和 iconClasses，用来显示不同的颜色和图标）
<div class="block">
  <span class="demonstration">默认不区分颜色</span>
  <vm-rate v-model="valueA1"></vm-rate>
</div>
<div class="block">
  <span class="demonstration">区分颜色</span>
  <vm-rate
      v-model="valueA2"
      :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
  </vm-rate>
</div>
<div class="block">
  <span class="demonstration">指定大小，默认单位px</span>
  <vm-rate
    v-model="valueA3"
    :size="36">
  </vm-rate>
</div>
<div class="block">
  <span class="demonstration">指定大小，单位rem</span>
  <vm-rate
    v-model="valueA4"
    size="2rem">
  </vm-rate>
</div>

<script>
  export default {
    data () {
      return {
        valueA1: 0,
        valueA2: 0,
        valueA3: 0,
        valueA4: 0
      }
    }
  }
</script>

辅助文字

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

辅助文字数组
一般
辅助文字模板 (新增特性，新增示例)
3星
为组件设置 show-text 属性会在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组，长度应等于最大值 max。（这里做了一些修改，如果你指定了 text-type="number" 那么将会使用 text-template="{value}" 显示辅助文字）
<div class="block">
  <span class="demonstration">辅助文字数组</span>
  <vm-rate
      v-model="valueB1"
      show-text
      :texts="['极差', '失望', '一般', '满意', '惊喜']"></vm-rate>
</div>
<div class="block">
  <span class="demonstration">辅助文字模板</span>
  <vm-rate
      v-model="valueB2"
      show-text
      text-type="number"
      text-template="{value}星"></vm-rate>
</div>

<script>
  export default {
    data () {
      return {
        valueB1: 3,
        valueB2: 3
      }
    }
  }
</script>

其它 icon

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

设置 icon-classes 属性可以自定义对应 3 个不同分段的图标。本例还使用 void-icon-class 指定了未选中时的图标类名。（还使用了 disabledVoidIconClass 指定了禁用时的图表类名）
<vm-rate
  v-model="valueC1"
  :iconClasses="['vm-icon-sad', 'vm-icon-neutral-full', 'vm-icon-smile']"
  voidIconClass="vm-icon-neutral-empty"
  disabledVoidIconClass="vm-icon-neutral-full"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</vm-rate>

<script>
  export default {
    data () {
      return {
        valueC1: 0,
      }
    }
  }
</script>

只读

只读的评分用来展示分数，允许出现半星

允许出现半星 (修改特性) 3.7
3.7
不允许出现半星 (新增示例)
3.7❤
为组件设置 disabled 属性表示组件为只读，支持小数分值。此时若设置 show-text，则会在右侧显示目前的分值。可以提供 text-template 作为显示模板，模板为一个包含了 {value} 的字符串，{value} 会被解析为分值。（你可以通过 allow-half="true"来指定是否允许出现半星， 你也可以修改 text-template="{value}❤"的修饰文字）
<div class="vd-demo__block vd-demo__block-1">
  <span class="vd-demo__demonstration">允许出现半星 <i class="new">(修改特性)</i></span>
  <vm-rate
      v-model="valueD1"
      disabled
      :allow-half="true"
      show-text
      text-color="#ff9900"
      text-template="{value}"></vm-rate>
</div>
<div class="vd-demo__block vd-demo__block-1">
  <span class="vd-demo__demonstration">不允许出现半星 <i class="new">(新增示例)</i></span>
  <vm-rate
      v-model="valueD1"
      disabled
      :allow-half="false"
      show-text
      text-color="#ff9900"
      text-template="{value}❤"></vm-rate>
</div>

<script>
  export default {
    data () {
      return {
        valueD1: 3.7,
        valueD2: 3.7
      }
    }
  }
</script>

半星 (新增示例)

当进行评价时，可以出现 .5 评分

默认半星
带辅助文字数组
带辅助文字模板
0❤
评分星星个数为10
为组件设置 allow-half 属性表示组件为是否允许半星，支持小数分值。此时若设置 show-text，则会在右侧显示目前的文字等级。也可以提供 text-type="number" 文字类型 和 text-template 作为显示模板，模板为一个包含了 {value} 的字符串，{value} 会被解析为分值。为组件设置 :max="10"属性修改星星个数。 
<div class="block">
  <span class="demonstration">默认半星</span>
  <vm-rate
      v-model="valueE1"
      :allow-half="true"></vm-rate>
</div>
<div class="block">
  <span class="demonstration">带辅助文字数组</span>
  <vm-rate
      v-model="valueE2"
      :allow-half="true"
      show-text></vm-rate>
</div>
<div class="block">
  <span class="demonstration">带辅助文字模板</span>
  <vm-rate
      v-model="valueE3"
      :allow-half="true"
      show-text
      text-type="number"
      text-color="#ff9900"
      text-template="{value}❤"></vm-rate>
</div>
<div class="block">
  <span class="demonstration">评分星星个数为10</span>
  <vm-rate
      v-model="valueE4"
      :max="10"
      :allow-half="true"
      show-text></vm-rate>
</div>

<script>
  export default {
    data () {
      return {
        valueE1: 0,
        valueE2: 0,
        valueE3: 0,
        valueE4: 0
      }
    }
  }
</script>

Attributes

参数 说明 类型 可选值 默认值
size （新增） 评分字体大小 number / string % / in / cm / mm / em / ex / pt / pc / px / rem 18
max 最大分值 number — 5
disabled 是否为只读 boolean — false
allow-half 是否允许半选 boolean — false
low-threshold 低分和中等分数的界限值，值本身被划分在低分中 number — 2
high-threshold 高分和中等分数的界限值，值本身被划分在高分中 number — 4
colors icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 array — ['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color 未选中 icon 的颜色 string — #C6D1DE
disabled-void-color 只读时未选中 icon 的颜色 string — #EFF2F7
icon-classes icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 array — ['vm-rate-icon-star-on', 'vm-rate-icon-star-on','vm-rate-icon-star-on']
void-icon-class 未选中 icon 的类名 string — vm-rate-icon-star-empty
disabled-void-icon-class 只读时未选中 icon 的类名 string — vm-rate-icon-star-on
show-text 是否显示辅助文字 boolean — false
text-color 辅助文字的颜色 string — #1F2D3D
texts 辅助文字数组 array — ['极差', '失望', '一般', '满意', '惊喜']
text-template 只读时的辅助文字模板 string — {value}
text-type （新增） 辅助文字类型 string number text

Events

事件名称 说明 回调参数
change 分值改变时触发 改变后的分值