Element-React Rate 评分

2020-10-16 10:52 更新

评分组件

基本用法

评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色)。三个等级所对应的颜色用过colors属性设置,而它们对应的两个阈值则通过 lowThresholdhighThreshold 设定, change可监听分值改变。

render() {
  return (
    <div className="intro-block">
      <div className="block">
        <span className="demonstration">默认不区分颜色</span>
        <span className="wrapper">
          <Rate onChange={(val) => alert(val)} />
        </span>
      </div>
      <div className="block">
        <span className="demonstration">区分颜色</span>
        <span className="wrapper">
          <Rate colors={['#99A9BF', '#F7BA2A', '#FF9900']} />
        </span>
      </div>
    </div>
  )
}

允许半选

可支持鼠标选择半星

为组件设置 allowHalf 属性点击图标左侧可选择半星。

render() {
  return <Rate allowHalf={true} onChange={(val) => console.log(val)} />
}

辅助文字

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

为组件设置 showText 属性会在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组,长度应等于最大值 max

render() {
  return <Rate showText={true} />
}

只读

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

为组件设置 disabled 属性表示组件为只读,支持小数分值。此时若设置 showText,则会在右侧显示目前的分值。可以提供 textTemplate 作为显示模板,模板为一个包含了{value}的字符串,{value} 会被解析为分值。

render() {
  return <Rate disabled={true} value={3.9} showText={true} />
}

Attributes

参数 说明 类型 可选值 默认值
max 最大分值 number 5
disabled 是否为只读 boolean false
allowHalf 是否允许半选 boolean false
lowThreshold 低分和中等分数的界限值,值本身 被划分在低分中 number 2
highThreshold 高分和中等分数的界限值,值本身 被划分在高分中 number 4
colors icon 的颜色数组,共有 3 个元素, 为 3 个分段所对应的颜色 array ['#F7BA2A', '#F7BA2A', '#F7BA2A']
voidColor 未选中 icon 的颜色 string #C6D1DE
disabledVoidColor 只读时未选中 icon 的颜色 string #EFF2F7
iconClasses icon 的类名数组,共有 3 个元素, 为 3 个分段所对应的类名 array ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on']
voidIconClass 未选中 icon 的类名 string el-icon-star-off
disabledVoidIconClass 只读时未选中 icon 的类名 string el-icon-star-on
showText 是否显示辅助文字 boolean false
textColor 辅助文字的颜色 string 1F2D3D
texts 辅助文字数组 array ['极差', '失望', '一般', '满意', '惊喜']
textTemplate 只读时的辅助文字模板 string {value}

Events

事件名称 说明 回调参数
onChange 分值改变时触发 改变后的分值
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号