Rater 评分组件
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| max | 可选，最高评分值 | Number | 5 |
| value | 可选，评分值，双向绑定 | Number | 0 |
| disabled | 可选，不可点击 | Boolean | false |
| star | 可选，评分图标样式 | String | ★ |
| active-color | 可选，激活颜色 | String | #fc6 |
| margin | 可选，图标间距离 | Number | 2 |
| fontSize | 可选，图标大小 | Number | 25 |
一般使用
template
<div>
<rater :value=3></rater>
</div>
<div>
<rater :value=2 :margin="15" active-color="#04BE02"></rater>
</div>
<div>
<rater :value=5 :max=6 :font-size=15 active-color="#FF9900"></rater>
</div>style
div {
margin:5px 0;
}不可点击
template
<div>
<rater :value=4 disabled></rater>
</div>
<div>
<rater :value=3.5 active-color="#04BE02" disabled></rater>
</div>style
div {
margin:5px 0;
}自定义评分图标
template
<div>
<rater :value=5 star="☼" active-color="#FF9900"></rater>
</div>
<div>
<rater :value=4 star="囧" active-color="#FF9900"></rater>
</div>style
div {
margin:5px 0;
}双向绑定
template
<rater :value.sync="rate"></rater>
<div v-text="'评分:' + rate"></div>script
export default {
data: {
rate:3
}
}