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

 

Logo

前往低代码交流专区

更多推荐