新增：评分分级分层、评分半星显示

Nottwoc · Nottwoc · commit cc56616c0e88 · 2020-09-20T13:57:12.000+08:00
diff --git a/uview-ui/components/u-rate/u-rate.vue b/uview-ui/components/u-rate/u-rate.vue
@@ -2,20 +2,22 @@
 	<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
 		<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
 			<u-icon
-				:name="activeIndex > index ? activeIcon : inactiveIcon"
+				:name="activeIndex > index ? elActiveIcon : inactiveIcon"
 				@click="click(index + 1, $event)"
-				:color="activeIndex > index ? activeColor : inactiveColor"
+				:color="activeIndex > index ? elActiveColor : inactiveColor"
 				:custom-style="{
 					fontSize: size + 'rpx',
 					padding: `0 ${gutter / 2 + 'rpx'}`
 				}"
+				:custom-prefix="customPrefix"
+				:show-decimal-icon="showDecimalIcon(index)"
+				:percent="decimal"
 			></u-icon>
 		</view>
 	</view>
 </template>
 
-<script>
-/**
+<script>/**
  * rate 评分
  * @description 该组件一般用于满意度调查，星型评分的场景
  * @tutorial https://www.uviewui.com/components/rate.html
@@ -29,10 +31,13 @@
  * @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
  * @property {String} gutter 星星之间的距离（默认10）
  * @property {String Number} min-count 最少选中星星的个数（默认0）
+ * @property {Array} colors 颜色分级显示，可以用不同颜色区分评分层级
+ * @property {Array} icons 图标分级显示，可以用不同类型的icon区分评分层级
  * @property {Boolean} allow-half 是否允许半星选择（默认false）
  * @event {Function} change 选中的星星发生变化时触发
  * @example <u-rate :count="count" :current="2"></u-rate>
  */
+
 export default {
 	name: 'u-rate',
 	props: {
@@ -97,6 +102,25 @@ export default {
 		inactiveIcon: {
 			type: String,
 			default: 'star'
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: 'uicon'
+		},
+		// 颜色分级显示，可以用不同颜色区分评分层级
+		colors: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// 图标分级显示，可以用不同类型的icon区分评分层级
+		icons: {
+			type: Array,
+			default() {
+				return []
+			}
 		}
 	},
 	data() {
@@ -109,94 +133,125 @@ export default {
 			activeIndex: this.value != -1 ? this.value : this.current,
 			starWidth: 0, // 每个星星的宽度
 			starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
-		};
+		}
 	},
 	watch: {
 		current(val) {
-			this.activeIndex = val;
+			this.activeIndex = val
 		},
 		value(val) {
-			this.activeIndex = val;
+			this.activeIndex = val
+		}
+	},
+	computed: {
+		decimal() {
+			if (this.disabled) {
+				return this.activeIndex * 100 % 100
+			} else if (this.allowHalf) {
+				return 50
+			}
+		},
+		elActiveIcon() {
+			const len = this.icons.length
+			if (len) {
+				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step > len) return this.icons[len - 1]
+				return this.icons[step - 1]
+			}
+			return this.activeIcon
+		},
+		elActiveColor() {
+			const len = this.colors.length
+			if (len) {
+				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step > len) return this.colors[len - 1]
+				return this.colors[step - 1]
+			}
+			return this.activeColor
 		}
 	},
 	methods: {
 		// 获取评分组件盒子的布局信息
 		getElRectById() {
 			// uView封装的获取节点的方法，详见文档
-			this.$uGetRect('#' + this.elId).then(res => {
-				this.starBoxLeft = res.left;
+			this.$u.getRect('#' + this.elId).then(res => {
+				this.starBoxLeft = res.left
 			})
 		},
 		// 获取单个星星的尺寸
 		getElRectByClass() {
 			// uView封装的获取节点的方法，详见文档
-			this.$uGetRect('.' + this.elClass).then(res => {
-				this.starWidth = res.width;
+			this.$u.getRect('.' + this.elClass).then(res => {
+				this.starWidth = res.width
 				// 把每个星星右边到组件盒子左边的距离放入数组中
 				for (let i = 0; i < this.count; i++) {
-					this.starWidthArr[i] = (i + 1) * this.starWidth;
+					this.starWidthArr[i] = (i + 1) * this.starWidth
 				}
 			})
 		},
 		// 手指滑动
 		touchMove(e) {
 			if (this.disabled) {
-				return;
+				return
 			}
 			if (!e.changedTouches[0]) {
-				return;
+				return
 			}
-			const movePageX = e.changedTouches[0].pageX;
+			const movePageX = e.changedTouches[0].pageX
 			// 滑动点相对于评分盒子左边的距离
-			const distance = movePageX - this.starBoxLeft;
+			const distance = movePageX - this.starBoxLeft
 
 			// 如果滑动到了评分盒子的左边界，就设置为0星
 			if (distance <= 0) {
-				this.activeIndex = 0;
+				this.activeIndex = 0
 			}
 			// 滑动的距离，相当于多少颗星星
-			let index = Math.ceil(distance / this.starWidth);
-			this.activeIndex = index > this.count ? this.count : index;
+			let index = Math.ceil(distance / this.starWidth)
+			this.activeIndex = index > this.count ? this.count : index
 			// 对最少颗星星的限制
-			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
-			this.emitEvent();
+			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+			this.emitEvent()
 		},
 		// 通过点击，直接选中
 		click(index, e) {
 			if (this.disabled) {
-				return;
+				return
 			}
 			// 半星选择，尚未实现
 			if (this.allowHalf) {
 			}
 			// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
 			if (index == 1) {
-				if (this.activeIndex == 1) this.activeIndex = 0;
-				else this.activeIndex = 1;
+				if (this.activeIndex == 1) {
+					this.activeIndex = 0
+				} else {
+					this.activeIndex = 1
+				}
 			} else {
-				this.activeIndex = index;
+				this.activeIndex = index
 			}
 			// 对最少颗星星的限制
-			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
-			this.emitEvent();
+			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+			this.emitEvent()
 		},
 		// 发出事件
 		emitEvent() {
 			// 发出change事件
-			this.$emit('change', this.activeIndex);
+			this.$emit('change', this.activeIndex)
 			// 同时修改双向绑定的value的值
-			if(this.value != -1) {
-				this.$emit('input', this.activeIndex);
+			if (this.value != -1) {
+				this.$emit('input', this.activeIndex)
 			}
+		},
+		showDecimalIcon(index) {
+			return this.disabled && parseInt(this.activeIndex) === index
 		}
 	},
 	mounted() {
-		setTimeout(() => {
-			this.getElRectById();
-			this.getElRectByClass();
-		}, 100)
+		this.getElRectById()
+		this.getElRectByClass()
 	}
-};
+}
 </script>
 
 <style scoped lang="scss">
