1、在uni-rate.vue中添加
watch: {
value(e) {
this.valueSync = e;
}
},
uni-rate.vue script全代码:
<script>
import uniIcons from "../uni-icons/uni-icons.vue";
export default {
name: "UniRate",
components: {
uniIcons
},
props: {
isFill: {
// 星星的类型,是否镂空
type: [Boolean, String],
default: true
},
color: {
// 星星的颜色
type: String,
default: "#cccccc"
},
activeColor: {
// 星星选中状态颜色
type: String,
default: "#ffca3e"
},
size: {
// 星星的大小
type: [Number, String],
default: 24
},
value: {
// 当前评分
type: [Number, String],
default: 0
},
max: {
// 最大评分
type: [Number, String],
default: 5
},
margin: {
// 星星的间距
type: [Number, String],
default: 0
},
disabled: {
// 是否可点击
type: [Boolean, String],
default: false
}
},
data() {
return {
valueSync: ""
};
},
computed: {
stars() {
const value = this.valueSync ? this.valueSync : 0;
const starList = [];
const floorValue = Math.floor(value);
const ceilValue = Math.ceil(value);
// console.log("ceilValue: " + ceilValue);
// console.log("floorValue: " + floorValue);
// console.log("max: " + this.max);
for (let i = 0; i < this.max; i++) {
if (floorValue > i) {
starList.push({
activeWitch: "100%"
});
} else if (ceilValue - 1 === i) {
starList.push({
activeWitch: (value - floorValue) * 100 + "%"
});
} else {
starList.push({
activeWitch: "0"
});
}
}
// console.log(JSON.stringify(starList.length));
// console.log("starList[4]: " + starList[4].activeWitch);
return starList;
}
},
created() {
this.valueSync = Number(this.value);
},
methods: {
_onClick(index) {
if (this.disabled) {
return;
}
this.valueSync = index + 1;
this.$emit("change", {
value: this.valueSync
});
}
},
watch: {
value(e) {
this.valueSync = e;
}
},
};
</script>
2、在你使用uni-rate的页面对uni-rate添加ref
<uni-rate value="0" max="5" size="22" margin="5" color="#ececec"
active-color="#ffca3e" is-fill="true" ref="rateStar"
@change="rateChange">
</uni-rate>
然后在该页面修改uni-rate的value:
this.$refs.rateStar.value = rateNum