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

Nottwoc · Nottwoc · commit df1303d6cd15 · 2020-09-20T15:10:47.000+08:00
diff --git a/pages/componentsB/rate/index.vue b/pages/componentsB/rate/index.vue
@@ -6,7 +6,7 @@
 				<u-rate v-model="value" :count="count" @change="change"
 				:active-color="activeColor" :inaction-color="inactiveColor"
 				:active-icon="activeIcon" :inactive-icon="inactiveIcon"
-				:disabled="disabled"></u-rate>
+				:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
 			</view>
 		</view>
 		<view class="u-config-wrap">
@@ -29,6 +29,10 @@
 				<view class="u-item-title">自定义图标</view>
 				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="iconChange"></u-subsection>
 			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否分层</view>
+				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalChange"></u-subsection>
+			</view>
 			<view class="u-config-item">
 				<view class="u-item-title">是否禁用</view>
 				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
@@ -53,7 +57,9 @@
 				count: 5,
 				customIcon: false,
 				plain: false,
-				value: 0
+				value: 0,
+				colors: [],
+				icons: []
 			}
 		},
 		watch: {
@@ -93,6 +99,15 @@
 					this.inactiveColor = '#b2b2b2';
 				}
 			},
+			decimalChange(index) {
+				if(index == 0) {
+					this.colors = ['#ffc454', '#ffb409', '#ff9500'];
+					this.icons = ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'];
+				} else {
+					this.colors = [];
+					this.icons = [];
+				}
+			},
 			iconChange(index) {
 				this.customIcon = !index;
 			},
diff --git a/uview-ui/components/u-rate/u-rate.vue b/uview-ui/components/u-rate/u-rate.vue
@@ -31,8 +31,6 @@
  * @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>
@@ -108,14 +106,12 @@ export default {
 			type: String,
 			default: 'uicon'
 		},
-		// 颜色分级显示，可以用不同颜色区分评分层级
 		colors: {
 			type: Array,
 			default() {
 				return []
 			}
 		},
-		// 图标分级显示，可以用不同类型的icon区分评分层级
 		icons: {
 			type: Array,
 			default() {
@@ -153,17 +149,19 @@ export default {
 		},
 		elActiveIcon() {
 			const len = this.icons.length
-			if (len) {
+			if (len && len <= this.count) {
 				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step < 1) return this.icons[0]
 				if (step > len) return this.icons[len - 1]
 				return this.icons[step - 1]
 			}
 			return this.activeIcon
 		},
 		elActiveColor() {
 			const len = this.colors.length
-			if (len) {
+			if (len && len <= this.count) {
 				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step < 1) return this.colors[0]
 				if (step > len) return this.colors[len - 1]
 				return this.colors[step - 1]
 			}
