Element-React Rate 評分

2020-10-16 10:52 更新

評分組件

基本用法

評分被分為三個等級,可以利用顏色對分數(shù)及情感傾向進行分級(默認情況下不區(qū)分顏色)。三個等級所對應的顏色用過colors屬性設置,而它們對應的兩個閾值則通過 lowThresholdhighThreshold 設定, change可監(jiān)聽分值改變。

  1. render() {
  2. return (
  3. <div className="intro-block">
  4. <div className="block">
  5. <span className="demonstration">默認不區(qū)分顏色</span>
  6. <span className="wrapper">
  7. <Rate onChange={(val) => alert(val)} />
  8. </span>
  9. </div>
  10. <div className="block">
  11. <span className="demonstration">區(qū)分顏色</span>
  12. <span className="wrapper">
  13. <Rate colors={['#99A9BF', '#F7BA2A', '#FF9900']} />
  14. </span>
  15. </div>
  16. </div>
  17. )
  18. }

允許半選

可支持鼠標選擇半星

為組件設置 allowHalf 屬性點擊圖標左側可選擇半星。

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

輔助文字

用輔助文字直接地表達對應分數(shù)

為組件設置 showText 屬性會在右側顯示輔助文字。通過設置 texts 可以為每一個分值指定對應的輔助文字。texts 為一個數(shù)組,長度應等于最大值 max

  1. render() {
  2. return <Rate showText={true} />
  3. }

只讀

只讀的評分用來展示分數(shù),允許出現(xiàn)半星

為組件設置 disabled 屬性表示組件為只讀,支持小數(shù)分值。此時若設置 showText,則會在右側顯示目前的分值。可以提供 textTemplate 作為顯示模板,模板為一個包含了{value}的字符串,{value} 會被解析為分值。

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

Attributes

參數(shù) 說明 類型 可選值 默認值
max 最大分值 number 5
disabled 是否為只讀 boolean false
allowHalf 是否允許半選 boolean false
lowThreshold 低分和中等分數(shù)的界限值,值本身 被劃分在低分中 number 2
highThreshold 高分和中等分數(shù)的界限值,值本身 被劃分在高分中 number 4
colors icon 的顏色數(shù)組,共有 3 個元素, 為 3 個分段所對應的顏色 array ['#F7BA2A', '#F7BA2A', '#F7BA2A']
voidColor 未選中 icon 的顏色 string #C6D1DE
disabledVoidColor 只讀時未選中 icon 的顏色 string #EFF2F7
iconClasses icon 的類名數(shù)組,共有 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 輔助文字數(shù)組 array ['極差', '失望', '一般', '滿意', '驚喜']
textTemplate 只讀時的輔助文字模板 string {value}

Events

事件名稱 說明 回調參數(shù)
onChange 分值改變時觸發(fā) 改變后的分值
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號