組件源碼：
https://github.com/AntJavascript/widgetUI/tree/master/Rate
FireShot Capture 13 - nvx - http___localhost_8080_demo#_Rate.png
組件結構：
<template>
<div class='wt-rate'>
<wt-row>
<div
:class="[clicked >= index ? checkedIcon + ' checked' : icon, type]"
v-for="(item, index) in ~~nubmer"
@click="handle(item, index)"
:key="index">
</div>
</wt-row>
</div>
</template>
代碼分析：
props參數：
props: {
nubmer: { // 組件顯示的數量
type: Number | String,
default: () => {
return 5;
}
},
currentIndex: { // 當前處于第幾個
type: Number | String,
default: () => {
return -1;
}
},
disable: { // 是否禁用
type: Boolean,
default: () => {
return false;
}
},
type: { // 組件類型教藻，（可選）主要是顏色的不同（可選值："default", "danger", "success", "warning")
type: String,
default: () => {
return 'default';
}
},
icon: { // 默認顯示的圖片
type: String,
default: () => {
return 'icon-favor';
}
},
checkedIcon: { // 選中顯示的圖片
type: String,
default: () => {
return 'icon-favor_fill';
}
}
}
data參數：
data () {
return {
clicked: this._props.currentIndex // 父組件指定的選擇項
};
}
methods函數：
methods: {
handle (item, index) {
if (!this.disable) { // 不禁用才可以點擊
this.clicked = index; 當前選中選項
this.$emit('handle', index + 1); // 傳值父組件
}
}
}
組件源碼：
https://github.com/AntJavascript/widgetUI/tree/master/Rate
