uni-app uni-rate uniRate 动态修改动态赋值

短命女 2023-06-20 09:03 42阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app uni-rate uniRate 动态修改动态赋值

1、在uni-rate.vue中添加 watch: { value(e) { this.valueSync = e;

短命女/ 2023年06月20日 09:03/ 0 赞/ 43 阅读

相关 logback java动态配置【动态修改日志级别，动态修改appender】

logback 动态配置写在前面在做java日志之前，强烈建议大家读一下这篇java日志的前世今生，对理清java日志框架很有帮助！奉上地址： [一

偏执的太偏执、/ 2023年06月13日 06:04/ 0 赞/ 60 阅读

相关根据参数动态赋值

在utils文件夹下建公用js文件，用来存放静态数据，只需在使用时引入。 export const demo = [ { label: '全部状态',

迷南。/ 2023年01月20日 04:56/ 0 赞/ 170 阅读

相关 uni-app uniRate 动态赋值

uni-rate.vue 组件： <template> <view> <view ref="uni-rate" class="uni-rate

怼烎@/ 2022年11月13日 04:07/ 0 赞/ 175 阅读

相关 uniapp动态修改样式_Vue如何动态修改CSS变量

想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>里面又写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过

Dear 丶/ 2022年10月13日 05:25/ 0 赞/ 2185 阅读

相关 uniapp动态权限修改之摄像头和存储权限

插件：[permission.js][] uniapp官网授权地址：[https://ext.dcloud.net.cn/plugin?id=594\detail][htt

た入场券/ 2022年08月29日 05:58/ 0 赞/ 1235 阅读

相关 jqpagination动态赋值实例

加载与分页说到HTML5和jquery上的分页问题，优秀的分页插件网上一抓一大把，然而同时适合兼容在Ipad和手机端的网站分页却不是特别多。

朴灿烈づ我的快乐病毒、/ 2022年08月19日 15:18/ 0 赞/ 192 阅读

相关 jquery动态赋值id 动态取id

直接上代码这是datatable中的一段代码取table中的id作为唯一 if(row.copy == '1'){ return '<div><inp

矫情吗；*/ 2022年07月11日 04:25/ 0 赞/ 295 阅读

相关 vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'mar

曾经终败给现在/ 2021年07月26日 02:44/ 0 赞/ 1844 阅读

相关 uniapp如何动态修改导航栏标题

在开发中我们往往会遇到一个页面有好多种支付状态的 , 这个时候头部的标题也要跟着动态变化的 , 一段代码搞定. 只需要这个段代码就可以搞定 uni.setNavig

朴灿烈づ我的快乐病毒、/ 2021年07月25日 13:09/ 0 赞/ 885 阅读