使用ant-design-vue的rate评分组件
1。修改颜色
2。十分制(默认是5分,改成10分。且提示也是10分制)
<a-rate v-model="score" :tooltips="rate10" allow-half @hoverChange="changeRate" />
data() {
score: 7, // 分值乘以和除以 2 即可完成十分制
rate10: ['2', '4', '6', '8', '10'],
},
created() {
this.score = this.score / 2 // 回显除以2
// this.score = this.score * 2 // 提交给后端乘以2
},
// 十分制提示
changeRate(e) {
console.log(e)
if (Number.isInteger(e)) {
this.rate10 = ['2', '4', '6', '8', '10']
} else {
this.rate10 = ['1', '3', '5', '7', '9']
}
},
css配色:(如果想做成不同评分渐变色,可以通过score的值来动态改变打分颜色;现在是固定配色)
// 打分颜色
::v-deep .ant-rate-star-full, ::v-deep .ant-rate-star-half {
color:#007d7b!important;
}