W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
評分組件
評分被分為三個等級,可以利用顏色對分數及情感傾向進行分級(默認情況下不區(qū)分顏色)。三個等級所對應的顏色用過colors
屬性設置,而它們對應的兩個閾值則通過 lowThreshold
和 highThreshold
設定, change可監(jiān)聽分值改變。
render() {
return (
<div className="intro-block">
<div className="block">
<span className="demonstration">默認不區(qū)分顏色</span>
<span className="wrapper">
<Rate onChange={(val) => alert(val)} />
</span>
</div>
<div className="block">
<span className="demonstration">區(qū)分顏色</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} />
}
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
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} |
事件名稱 | 說明 | 回調參數 |
---|---|---|
onChange | 分值改變時觸發(fā) | 改變后的分值 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯系方式:
更多建議: