uni-app uniRate 动态赋值

怼烎@ 2022-11-13 04:07 231阅读 0赞

uni-rate.vue 组件 ：

<template>
    	<view>
    		<view ref="uni-rate" class="uni-rate">
    			<view v-if="" class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}" :style="{ 'margin-right': margin + 'px' }" v-for="(star, index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseleave="mouseleave">
    				<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
    				
    				<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
    					<uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size" type="star-filled" />
    				</view>
    				
    				
    				<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
    					<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
    				</view>
    				
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	// #ifdef APP-NVUE
    	const dom = uni.requireNativePlugin('dom');
    	// #endif
    	import uniIcons from "../extUI/icons/icons.nvue";
    	/**
    	 * Rate 评分
    	 * @description 评分组件
    	 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
    	 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
    	 * @property {String} 	color 						未选中状态的星星颜色，默认为 "#ececec"
    	 * @property {String} 	activeColor 				选中状态的星星颜色，默认为 "#ffca3e"
    	 * @property {String} 	disabledColor 				禁用状态的星星颜色，默认为 "#c0c0c0"
    	 * @property {Number} 	size 						星星的大小
    	 * @property {Number} 	value/v-model 				当前评分
    	 * @property {Number} 	max 						最大评分评分数量，目前一分一颗星
    	 * @property {Number} 	margin 						星星的间距，单位 px
    	 * @property {Boolean} 	disabled = [true|false] 	是否为禁用状态，默认为 false
    	 * @property {Boolean} 	readonly = [true|false] 	是否为只读状态，默认为 false
    	 * @property {Boolean} 	allowHalf = [true|false] 	是否实现半星，默认为 false
    	 * @property {Boolean} 	touchable = [true|false] 	是否支持滑动手势，默认为 true
    	 * @event {Function} change 						uniRate 的 value 改变时触发事件，e={value:Number}
    	 */
    
    	export default {
    		components: {
    			uniIcons
    		},
    		name: "UniRate",
    		props: {
    			isFill: {
    				// 星星的类型，是否镂空
    				type: [Boolean, String],
    				default: true
    			},
    			color: {
    				// 星星未选中的颜色
    				type: String,
    				default: "#ececec"
    			},
    			activeColor: {
    				// 星星选中状态颜色
    				type: String,
    				default: "#ffca3e"
    			},
    			disabledColor: {
    				// 星星禁用状态颜色
    				type: String,
    				default: "#c0c0c0"
    			},
    			size: {
    				// 星星的大小
    				type: [Number, String],
    				default: 24
    			},
    			value: {
    				// 当前评分
    				type: [Number, String],
    				default: 1
    			},
    			max: {
    				// 最大评分
    				type: [Number, String],
    				default: 5
    			},
    			margin: {
    				// 星星的间距
    				type: [Number, String],
    				default: 0
    			},
    			disabled: {
    				// 是否可点击
    				type: [Boolean, String],
    				default: false
    			},
    			readonly: {
    				// 是否只读
    				type: [Boolean, String],
    				default: false
    			},
    			allowHalf: {
    				// 是否显示半星
    				type: [Boolean, String],
    				default: false
    			},
    			touchable: {
    				// 是否支持滑动手势
    				type: [Boolean, String],
    				default: true
    			}
    		},
    		data() {
    			return {
    				valueSync: "",
    				userMouseFristMove: true,
    				userRated: false,
    				userLastRate: 1
    			};
    		},
    		watch: {
    			value(newVal) {
    				this.valueSync = Number(newVal);
    			},
    		},
    		computed: {
    			stars() {
    				const value = this.valueSync ? this.valueSync : 0;
    				const starList = [];
    				const floorValue = Math.floor(value);
    				const ceilValue = Math.ceil(value);
    				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"
    						});
    					}
    				}
    				return starList;
    			}
    		},
    		created() {
    			this.valueSync = Number(this.value);
    			this._rateBoxLeft = 0
    			this._oldValue = null
    		},
    		mounted() {
    			setTimeout(() => {
    				this._getSize()
    			}, 100)
    			// #ifdef H5
    			this.PC = this.IsPC()
    			// #endif
    		},
    		methods: {
    			touchstart(e) {
    				// #ifdef H5
    				if (this.IsPC()) return
    				// #endif
    				if (this.readonly || this.disabled) return
    				const {
    					clientX,
    					screenX
    				} = e.changedTouches[0]
    				// TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
    				this._getRateCount(clientX || screenX)
    			},
    			touchmove(e) {
    				// #ifdef H5
    				if (this.IsPC()) return
    				// #endif
    				if (this.readonly || this.disabled || !this.touchable) return
    				const {
    					clientX,
    					screenX
    				} = e.changedTouches[0]
    				this._getRateCount(clientX || screenX)
    			},
    
    			/**
    			 * 兼容 PC @tian
    			 */
    
    			mousedown(e) {
    				// #ifdef H5
    				if (!this.IsPC()) return
    				if (this.readonly || this.disabled) return
    				const {
    					clientX,
    				} = e
    				this.userLastRate = this.valueSync
    				this._getRateCount(clientX)
    				this.userRated = true
    				// #endif
    			},
    			mousemove(e) {
    				// #ifdef H5
    				if (!this.IsPC()) return
    				if (this.userRated) return
    				if (this.userMouseFristMove) {
    					console.log('---mousemove----', this.valueSync);
    					this.userLastRate = this.valueSync
    					this.userMouseFristMove = false
    				}
    				if (this.readonly || this.disabled || !this.touchable) return
    				const {
    					clientX,
    				} = e
    				this._getRateCount(clientX)
    				// #endif
    			},
    			mouseleave(e) {
    				// #ifdef H5
    				if (!this.IsPC()) return
    				if (this.readonly || this.disabled || !this.touchable) return
    				if (this.userRated) {
    					this.userRated = false
    					return
    				}
    				this.valueSync = this.userLastRate
    				// #endif
    			},
    			// #ifdef H5
    			IsPC() {
    				var userAgentInfo = navigator.userAgent;
    				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    				var flag = true;
    				for (var v = 0; v < Agents.length; v++) {
    					if (userAgentInfo.indexOf(Agents[v]) > 0) {
    						flag = false;
    						break;
    					}
    				}
    				return flag;
    			},
    			// #endif
    
    			/**
    			 * 获取星星个数
    			 */
    			_getRateCount(clientX) {
    				const size = Number(this.size)
    				if (size === NaN) {
    					return new Error('size 属性只能设置为数字')
    				}
    				const rateMoveRange = clientX - this._rateBoxLeft
    				let index = parseInt(rateMoveRange / (size + this.margin))
    				index = index < 0 ? 0 : index;
    				index = index > this.max ? this.max : index;
    				const range = parseInt(rateMoveRange - (size + this.margin) * index);
    				let value = 0;
    				if (this._oldValue === index && !this.PC) return;
    				this._oldValue = index;
    				if (this.allowHalf) {
    					if (range > (size / 2)) {
    						value = index + 1
    					} else {
    						value = index + 0.5
    					}
    				} else {
    					value = index + 1
    				}
    
    				value = Math.max(0.5, Math.min(value, this.max))
    				this.valueSync = value
    				this._onChange()
    			},
    
    			/**
    			 * 触发动态修改
    			 */
    			_onChange() {
    
    				this.$emit("input", this.valueSync);
    				this.$emit("change", {
    					value: this.valueSync
    				});
    			},
    			/**
    			 * 获取星星距离屏幕左侧距离
    			 */
    			_getSize() {
    				// #ifndef APP-NVUE
    				uni.createSelectorQuery()
    					.in(this)
    					.select('.uni-rate')
    					.boundingClientRect()
    					.exec(ret => {
    						if (ret) {
    							this._rateBoxLeft = ret[0].left
    						}
    					})
    				// #endif
    				// #ifdef APP-NVUE
    				dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
    					const size = ret.size
    					if (size) {
    						this._rateBoxLeft = size.left
    					}
    				})
    				// #endif
    			}
    		}
    	};
    </script>
    
    <style scoped>
    	.uni-rate {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		line-height: 1;
    		font-size: 0;
    		flex-direction: row;
    		/* #ifdef H5 */
    		cursor: pointer;
    		/* #endif */
    	}
    
    	.uni-rate__icon {
    		position: relative;
    		line-height: 1;
    		font-size: 0;
    	}
    
    	.uni-rate__icon-on {
    		overflow: hidden;
    		position: absolute;
    		top: 0;
    		left: 0;
    		line-height: 1;
    		text-align: left;
    	}
    
    	.uni-cursor-not-allowed {
    		/* #ifdef H5 */
    		cursor: not-allowed !important;
    		/* #endif */
    	}
    </style>

主界面：

<template>
    	<view>
    	 <uni-rate v-model="sendDate.score" color="#bbb"></uni-rate></view>
    	</view>
    </template>
    
    <script>
    import UniRate from "./uni-rate.vue";
    export default {
    	components: {
    	    UniRate
    	},
    	data() {
    		return {
    			 stars: [1, 2, 3, 4, 5],
    			 sendDate: {
    			 	score: 0,
    			 	content: '',
    			 	contact: ''
    			 }
    		};
    	},
    
    
    	methods: {
    			/**
    			 * 评分
    			 * @param {Object} e
    			 */
    			chooseStar(e) {
    				//点击评星
    				this.$refs.sendDate.score = e;
    			},
    	}
    };
    </script>
    
    <style   scoped>
    
    </style>

![在这里插入图片描述][20210325113206580.png]

[20210325113206580.png]: /images/20221022/3121d62adecf4620986635eaf56cb2ad.png