Merge pull request #244 from zhenzhencai/bugfix/stepper

fix: 修复rate组件在ios真机颜色设置失效的问题
Tencent · Mar 10, 2022 · 3740186 · 3740186
2 parents 290cb56 + d2b8e09
commit 3740186
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 23 deletions.
diff --git a/example/pages/rate/rate.ts b/example/pages/rate/rate.ts
@@ -1,14 +1,14 @@
 /*
  * @Author: rileycai
  * @Date: 2022-03-04 23:00:57
- * @LastEditTime: 2022-03-09 20:05:24
+ * @LastEditTime: 2022-03-10 15:15:10
  * @LastEditors: rileycai
  * @Description:
  * @FilePath: /tdesign-miniprogram/example/pages/rate/rate.ts
  */
 Page({
   data: {
-    value: [1, 2, 3, 3.5, 4, 5, 3, 3, 3, 3, 3],
+    value: [1, 2, 3, 3.5, 4, 5, 3, 3, 3, 3, 3, 3, 2.5],
     texts: ['1分', '2分', '3分', '4分', '5分'],
   },
 

diff --git a/example/pages/rate/rate.wxml b/example/pages/rate/rate.wxml
@@ -72,6 +72,27 @@
         bind:change="onChange"
       />
     </view>
+    <view class="demo-section__desc">设置评分颜色</view>
+    <view class="item">
+      <view class="item__title">空心评分</view>
+      <t-rate
+        value="{{value[11]}}"
+        data-index="{{11}}"
+        color="#FFC51C,#bbbbbb"
+        bind:change="onChange"
+      />
+    </view>
+    <view class="item">
+      <view class="item__title">实心评分</view>
+      <t-rate
+        value="{{value[12]}}"
+        allowHalf
+        variant="filled"
+        data-index="{{12}}"
+        color="#FFC51C,#bbbbbb"
+        bind:change="onChange"
+      />
+    </view>
   </t-demo>
   <t-demo title="02 规格">
     <view class="demo-section__desc">评价规格</view>

diff --git a/src/rate/README.md b/src/rate/README.md
@@ -24,26 +24,29 @@ isComponent: true
 <img src="https://tdesign.gtimg.com/miniprogram/readme/rate.png" width="375px" height="50%">
 
 ```html
-<!-- 实心评分 设置属性：variant-->
+<!-- 实心评分，设置属性：variant-->
 <t-rate defaultValue="{{value}}" variant="filled"></t-rate>
 
-<!-- 空心评分 设置属性：variant-->
+<!-- 空心评分，设置属性：variant-->
 <t-rate defaultValue="{{value}}" variant="outline"  bind:change="changeValue"></t-rate>
 
-<!-- 自定义评分数量 设置属性：count-->
+<!-- 自定义评分数量，设置属性：count-->
 <t-rate defaultValue="{{value}}" variant="outline" count="{{6}}"></t-rate>
 
-<!-- 半星评分 设置属性：allowHalf -->
+<!-- 半星评分，设置属性：allowHalf -->
 <t-rate defaultValue="{{value}}" variant="filled" allowHalf></t-rate>
 
-<!-- 带描述评分 设置属性：showText-->
+<!-- 带描述评分，设置属性：showText-->
 <t-rate defaultValue="{{value}}" variant="outline" showText></t-rate>
 
-<!-- 自定义带描述评分， 设置属性：texts -->
+<!-- 自定义带描述评分，设置属性：texts -->
 <t-rate defaultValue="{{value}}" variant="outline" showText texts="{{texts}}"></t-rate>
 
-<!-- 禁用评分： 设置属性：disabled -->
+<!-- 禁用评分，设置属性：disabled -->
 <t-rate defaultValue="{{value}}" variant="filled" disabled></t-rate>
+
+<!-- 设置评分颜色，设置属性： color-->
+<t-rate defaultValue="{{value}}" variant="filled" color="#FFC51C,#DDDDDD"></t-rate>
 ```
 
 ### 受控用法
@@ -70,7 +73,7 @@ Page({
 | 名称       | 类型    | 默认值  | 说明                                                                                                                                                                      | 必传 |
 | ---------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
 | allow-half | Boolean | false   | 是否允许半选                                                                                                                                                              | N    |
-| color      | String  | #ED7B2F | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：['#ED7B2F', '#999999'] | N    |
+| color      | String  | #ED7B2F | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：'#ED7B2F,#999999' | N    |
 | count      | Number  | 5       | 评分的数量                                                                                                                                                                | N    |
 | disabled   | Boolean | false   | 是否禁用评分                                                                                                                                                              | N    |
 | gap        | Number  | 6       | 评分图标的间距                                                                                                                                                            | N    |

diff --git a/src/rate/rate.wxs b/src/rate/rate.wxs
@@ -18,10 +18,9 @@ module.exports = {
   },
   getIconColor: function (defaultValue, value, index, allowHalf, disabled, color, disabledColor) {
     var curVal = value ? value : defaultValue;
-    var colorIndex = color.indexOf(',');
-    var primaryColor = colorIndex !== -1 ? color.slice(0, colorIndex) : color;
-    var defaultColor =
-      colorIndex !== -1 ? color.slice(colorIndex + 1, colorIndex * 2 + 1) : '#E3E6EB';
+    var colorList = color.split(',');
+    var primaryColor = colorList[0] || color;
+    var defaultColor = colorList[1] || '#E3E6EB';
     if (curVal - index >= 1) {
       return disabled ? disabledColor : primaryColor;
     } else if (allowHalf && curVal - index > 0) {
@@ -31,17 +30,15 @@ module.exports = {
     }
   },
   getBackgroundColor: function (disabled, color, disabledColor) {
-    var colorIndex = color.indexOf(',');
-    var primaryColor = colorIndex !== -1 ? color.slice(0, colorIndex) : color;
-    var defaultColor =
-      colorIndex !== -1 ? color.slice(colorIndex + 1, colorIndex * 2 + 1) : '#E3E6EB';
-
-    var color = disabled ? disabledColor : primaryColor;
+    var colorList = color.split(',');
+    var primaryColor = colorList[0] || color;
+    var defaultColor = colorList[1] || '#E3E6EB';
+    var linearColor = disabled ? disabledColor : primaryColor;
     return (
       'background:linear-gradient(to right, ' +
-      color +
+      linearColor +
       ' 0%,' +
-      color +
+      linearColor +
       ' 50%, ' +
       defaultColor +
       ' 51%, ' +

diff --git a/src/rate/type.ts b/src/rate/type.ts
@@ -17,7 +17,7 @@ export interface TdRateProps {
    */
   color?: {
     type: StringConstructor;
-    optionalTypes: Array<StringConstructor | ArrayConstructor>;
+    optionalTypes: Array<StringConstructor> | StringConstructor;
     value?: string | Array<string>;
   };
   /**