feat(rate): rate组件库支持自定义图标前缀iconPrefix,适配第三方图标库

rate组件库支持自定义图标前缀iconPrefix,适配第三方图标库

fix #2327

package.json

@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}

src/rate/README.en-US.md

@@ -1,39 +1,48 @@
+<!--
+ * @Author: twinkleli [email protected]
+ * @Date: 2023-08-29 09:53:44
+ * @LastEditors: twinkleli [email protected]
+ * @LastEditTime: 2023-08-29 11:02:04
+ * @FilePath: /tdesign-miniprogram/src/rate/README.en-US.md
+ * @Description: 
+-->
 :: BASE_DOC ::
 
 ## API
 ### Rate Props
 
-name | type | default | description | required
--- | -- | -- | -- | --
-allow-half | Boolean | false | \- | N
-color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N
-count | Number | 5 | \- | N
-disabled | Boolean | - | \- | N
-external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
-gap | String / Number | 8 | \- | N
-icon | String / Array | - | Typescript：`string \| string[]` | N
-show-text | Boolean | false | \- | N
-size | String | 24px | \- | N
-texts | Array | [] | Typescript：`Array<string>` | N
-value | Number | 0 | \- | N
-default-value | Number | undefined | uncontrolled property | N
-variant | String | outline | options：outline/filled | N
+| name             | type            | default   | description                                     | required |
+| ---------------- | --------------- | --------- | ----------------------------------------------- | -------- |
+| allow-half       | Boolean         | false     | \-                                              | N        |
+| color            | String / Array  | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N        |
+| count            | Number          | 5         | \-                                              | N        |
+| disabled         | Boolean         | -         | \-                                              | N        |
+| external-classes | Array           | -         | `['t-class', 't-class-icon', 't-class-text']`   | N        |
+| gap              | String / Number | 8         | \-                                              | N        |
+| icon             | String / Array  | -         | Typescript：`string \| string[]`                | N        |
+| show-text        | Boolean         | false     | \-                                              | N        |
+| size             | String          | 24px      | \-                                              | N        |
+| texts            | Array           | []        | Typescript：`Array<string>`                     | N        |
+| value            | Number          | 0         | \-                                              | N        |
+| default-value    | Number          | undefined | uncontrolled property                           | N        |
+| iconPrefix       | String          | undefined | icon prefix                                     | N        |
+| variant          | String          | outline   | options：outline/filled                         | N        |
 
 ### Rate Events
 
-name | params | description
--- | -- | --
-change | `(value: number)` | \-
+| name   | params            | description |
+| ------ | ----------------- | ----------- |
+| change | `(value: number)` | \-          |
 
 
 ### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-rate-icon-scale | 1.33 | - 
---td-rate-selected-color | @warning-color | - 
---td-rate-text-active-color | @font-gray-1 | - 
---td-rate-text-active-font-weight | 600 | - 
---td-rate-text-color | @font-gray-4 | - 
---td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 
+| Name                              | Default Value                | Description |
+| --------------------------------- | ---------------------------- | ----------- |
+| --td-rate-icon-scale              | 1.33                         | -           |
+| --td-rate-selected-color          | @warning-color               | -           |
+| --td-rate-text-active-color       | @font-gray-1                 | -           |
+| --td-rate-text-active-font-weight | 600                          | -           |
+| --td-rate-text-color              | @font-gray-4                 | -           |
+| --td-rate-text-font-size          | @font-size-m                 | -           |
+| --td-rate-unselected-color        | @bg-color-secondarycomponent | -           |

src/rate/README.md

@@ -58,46 +58,51 @@ isComponent: true
 
 {{ special }}
 
+自定义图片前缀
+
+{{iconPrefix}}
+
 
 ## API
 ### Rate Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-allow-half | Boolean | false | 是否允许半选 | N
-color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
-count | Number | 5 | 评分的数量 | N
-disabled | Boolean | - | 是否禁用评分 | N
-gap | Number | 8 | 评分图标的间距 | N
-icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
-show-text | Boolean | false | 是否显示对应的辅助文字 | N
-size | String | 24px | 评分图标的大小 | N
-texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
-value | Number | 0 | 选择评分的值 | N
-default-value | Number | undefined | 选择评分的值。非受控属性 | N
-variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+| 名称          | 类型           | 默认值    | 说明                                                                                                                                                                                                                                                              | 必传 |
+| ------------- | -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| allow-half    | Boolean        | false     | 是否允许半选                                                                                                                                                                                                                                                      | N    |
+| color         | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N    |
+| count         | Number         | 5         | 评分的数量                                                                                                                                                                                                                                                        | N    |
+| disabled      | Boolean        | -         | 是否禁用评分                                                                                                                                                                                                                                                      | N    |
+| gap           | Number         | 8         | 评分图标的间距                                                                                                                                                                                                                                                    | N    |
+| icon          | String / Array | -         | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]`                                                                                                                                                                                   | N    |
+| show-text     | Boolean        | false     | 是否显示对应的辅助文字                                                                                                                                                                                                                                            | N    |
+| size          | String         | 24px      | 评分图标的大小                                                                                                                                                                                                                                                    | N    |
+| texts         | Array          | []        | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>`                                                                                                   | N    |
+| value         | Number         | 0         | 选择评分的值                                                                                                                                                                                                                                                      | N    |
+| default-value | Number         | undefined | 选择评分的值。非受控属性                                                                                                                                                                                                                                          | N    |
+| iconPrefix    | String         | undefined | 定义图标前缀                                                                                                                                                                                                                                                      | N    |
+| variant       | String         | outline   | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled                                                                                                                                                                                                  | N    |
 
 ### Rate Events
 
-名称 | 参数 | 描述
--- | -- | --
-change | `(value: number)` | 评分数改变时触发
+| 名称   | 参数              | 描述             |
+| ------ | ----------------- | ---------------- |
+| change | `(value: number)` | 评分数改变时触发 |
 
 ### Rate 外部样式类
-类名 | 说明
--- | -- 
-t-class | 根节点样式类
-t-class-icon` | 图标样式类
-t-class-text | 文本样式类
+| 类名          | 说明         |
+| ------------- | ------------ |
+| t-class       | 根节点样式类 |
+| t-class-icon` | 图标样式类   |
+| t-class-text  | 文本样式类   |
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-rate-icon-scale | 1.33 | - 
---td-rate-selected-color | @warning-color | - 
---td-rate-text-active-color | @font-gray-1 | - 
---td-rate-text-active-font-weight | 600 | - 
---td-rate-text-color | @font-gray-4 | - 
---td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 
+| 名称                              | 默认值                       | 描述 |
+| --------------------------------- | ---------------------------- | ---- |
+| --td-rate-icon-scale              | 1.33                         | -    |
+| --td-rate-selected-color          | @warning-color               | -    |
+| --td-rate-text-active-color       | @font-gray-1                 | -    |
+| --td-rate-text-active-font-weight | 600                          | -    |
+| --td-rate-text-color              | @font-gray-4                 | -    |
+| --td-rate-text-font-size          | @font-size-m                 | -    |
+| --td-rate-unselected-color        | @bg-color-secondarycomponent | -    |

src/rate/_example/custom-prefix/index.js

@@ -0,0 +1,13 @@
+Component({
+  data: {
+    value: 3,
+  },
+  methods: {
+    onChange(e) {
+      const { value } = e.detail;
+      this.setData({
+        value,
+      });
+    },
+  },
+});

src/rate/_example/custom-prefix/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/custom-prefix/index.wxml

@@ -0,0 +1,4 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">自定义icon前缀</view>
+  <t-rate value="{{value}}" iconPrefix="icon" icon="a-1h" bind:change="onChange" />
+</view>

src/rate/_example/custom-prefix/index.wxss

@@ -0,0 +1,22 @@
+.demo-rate {
+  background-color: #fff;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}

src/rate/_example/iconfont.wxss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'icon'; /* Project id 3144196 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=')
+      format('woff2'),
+    url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.woff?t=1642299317916') format('woff'),
+    url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.ttf?t=1642299317916') format('truetype');
+}
+
+.icon {
+  font-family: 'icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-0:before {
+  content: '\e64d';
+}
+
+.icon-a-1h:before {
+  content: '\e64e';
+}
+
+.icon-a-2h:before {
+  content: '\e64f';
+}
+
+.icon-a-3h:before {
+  content: '\e650';
+}

src/rate/_example/rate.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "base": "./base",
     "custom": "./custom",
+    "custom-prefix": "./custom-prefix",
     "special": "./special",
     "un-filled": "./un-filled",
     "count": "./count",

src/rate/_example/rate.less

@@ -0,0 +1 @@
+@import './iconfont.wxss';

src/rate/_example/rate.wxml

@@ -8,6 +8,9 @@
     <view class="demo-desc">自定义评分</view>
     <custom />
 
+    <view class="demo-desc">自定义icon前缀评分(适配自有图标库)</view>
+    <custom-prefix />
+
     <view class="demo-desc">自定义评分数量</view>
     <count />
 

src/rate/props.ts

@@ -34,6 +34,11 @@ const props: TdRateProps = {
     type: null,
     value: 8,
   },
+  /** 自定义图标前缀 */
+  iconPrefix: {
+    type: String,
+    value: undefined,
+  },
   /** 自定义评分图标，[选中图标，未选中图标] */
   icon: {
     type: null,

src/rate/rate.wxml

@@ -24,6 +24,7 @@
       t-class="{{prefix}}-class-icon"
       name="{{utils.getIconName(defaultValue, value, index, icon)}}"
       size="{{ size }}"
+      prefix="{{iconPrefix}}"
     />
   </view>
   <text

src/rate/type.ts

@@ -59,6 +59,14 @@ export interface TdRateProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 自定义图标前缀
+   */
+  iconPrefix?: {
+    type: StringConstructor;
+    value?: string;
+    reuqired?: boolean;
+  };
   /**
    * 自定义评分图标，[选中图标，未选中图标]
    */