wangluohuoyun-app/common/components/uni-rate.vue

<template>
	<view>
		<view ref="uni-rate" class="uni-rate">
			<view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
				:style="{ 'margin-right': marginNumber + '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'" />
				<!-- #ifdef APP-NVUE -->
				<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>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
					<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 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 {
		name: "UniRate",
		props: {
			isFill: {
				// 星星的类型，是否镂空
				type: [Boolean, String],
				default: true
			},
			color: {
				// 星星未选中的颜色
				type: String,
				default: "#ececec"
			},
			activeColor: {
				// 星星选中状态颜色
				type: String,
				default: "#FEC823"
			},
			disabledColor: {
				// 星星禁用状态颜色
				type: String,
				default: "#c0c0c0"
			},
			size: {
				// 星星的大小
				type: [Number, String],
				default: 20
			},
			value: {
				// 当前评分
				type: [Number, String],
				default: 0
			},
			modelValue: {
				// 当前评分
				type: [Number, String],
				default: 0
			},
			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);
			},
			modelValue(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;
			},

			marginNumber() {
				return Number(this.margin)
			}
		},
		created() {
			this.valueSync = Number(this.value || this.modelValue);
			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 (let v = 0; v < Agents.length - 1; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			},
			// #endif

			/**
			 * 获取星星个数
			 */
			_getRateCount(clientX) {
				this._getSize()
				const size = Number(this.size)
				if (size === NaN) {
					return new Error('size 属性只能设置为数字')
				}
				const rateMoveRange = clientX - this._rateBoxLeft
				let index = parseInt(rateMoveRange / (size + this.marginNumber))
				index = index < 0 ? 0 : index;
				index = index > this.max ? this.max : index;
				const range = parseInt(rateMoveRange - (size + this.marginNumber) * 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("update:modelValue", 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 lang="scss">
	.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>