1. rate評分

1.1. rate評分組件。

1.2. 評分屬性

參數	說明	類型	默認值
value / v-model	綁定值	number	0
max	最大分值	number	5
disabled	是否為只讀	boolean	false
allow-half	是否允許半選	boolean	false
low-threshold	低分和中等分數的界限值, 值本身被劃分在低分中	number	2
high-threshold	高分和中等分數的界限值, 值本身被劃分在高分中	number	4
colors	icon的顏色。若傳入數組, 共有3個元素, 為3個分段所對應的顏色; 若傳入對象, 可自定義分段, 鍵名為分段的界限值, 鍵值為對應的顏色	array/object	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	未選中icon的顏色	string	#C6D1DE
disabled-void-color	只讀時未選中icon的顏色	string	#EFF2F7
icon-classes	icon的類名。若傳入數組, 共有3個元素, 為3個分段所對應的類名; 若傳入對象, 可自定義分段, 鍵名為分段的界限值, 鍵值為對應的類名	array/object	['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class	未選中icon的類名	string	el-icon-star-off
disabled-void-icon-class	只讀時未選中icon的類名	string	el-icon-star-on
show-text	是否顯示輔助文字, 若為真, 則會從texts數組中選取當前分數對應的文字內容	boolean	false
show-score	是否顯示當前分數, show-score和show-text不能同時為真	boolean	false
text-color	輔助文字的顏色	string	#1F2D3D
texts	輔助文字數組	array	['極差', '失望', '一般', '滿意', '驚喜']
score-template	分數顯示模板	string	{value}

1.3. 事件名稱

事件名稱	說明	回調參數
change	分值改變時觸發	改變后的分值

2. rate評分例子

2.1. 使用腳手架新建一個名為element-ui-rate的前端項目, 同時安裝Element插件。

2.2. 編寫App.vue?

<template><div id="app"><h1>基礎用法</h1><div class="block"><span>默認不區分顏色</span><el-rate v-model="base_value1" :max="10"></el-rate></div><div class="block"><span>區分顏色</span><el-rate v-model="base_value2" :colors="base_colors"></el-rate></div><h1>輔助文字</h1><el-rate v-model="text_value" show-text></el-rate><h1>其它icon</h1><el-rate v-model="icon_value" :icon-classes="iconClasses" void-icon-class="el-icon-more-outline" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate><h1>只讀-允許出現半星</h1><el-rate v-model="disabled_value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate></div> </template><script> export default {data () {return {base_value1: null,base_value2: null,base_colors: ['#99A9BF', '#F7BA2A', '#FF9900'],text_value: null,icon_value: null,iconClasses: ['el-icon-more', 'el-icon-more', 'el-icon-more'],disabled_value: 3.7}} } </script>

2.3. 運行項目

總結

以上是生活随笔為你收集整理的018_rate评分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。