feat(rate): add namespace prop

varletjs · Mar 7, 2022 · 3aaa917 · 3aaa917
1 parent bef6f99
commit 3aaa917
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue
@@ -9,7 +9,12 @@
         :class="getClass(val)"
         @click="handleClick(val, $event)"
       >
-        <var-icon :transition="0" :name="getIconName(val)" :style="{ fontSize: toSizeUnit(size) }" />
+        <var-icon
+          :transition="0"
+          :namespace="namespace"
+          :name="getIconName(val)"
+          :style="{ fontSize: toSizeUnit(size) }"
+        />
       </div>
     </div>
     <var-form-details :error-message="errorMessage" />

diff --git a/packages/varlet-ui/src/rate/docs/en-US.md b/packages/varlet-ui/src/rate/docs/en-US.md
@@ -178,6 +178,7 @@ Other values are converted to text as a user prompt.
 | `gap` | Icon spacing, default unit is `px` | _number \| string_ | `4` |
 | `half` | Whether half selection is allowed | _boolean_ | `false` |
 | `half-icon` | The half-selected icon style only works if `half` is `true` | _string_ | `star-half-full` |
+| `namespace` | Icon namespace, extensible custom icon library |  _string_ | `var-icon` |
 | `disabled` | Whether or not rating is prohibited | _boolean_ | `false` |
 | `disabled-color` | The color of the icon when disabling grading is only effective when `disabled` is `true` and has higher priority than `color` and `empty-color` | _string_ | `#bdbdbd` |
 | `readonly` | Whether to use rating read-only | _boolean_ | `false` |

diff --git a/packages/varlet-ui/src/rate/docs/zh-CN.md b/packages/varlet-ui/src/rate/docs/zh-CN.md
@@ -178,6 +178,7 @@ export default {
 | `gap` | 图标间隔，默认单位为 `px` | _number \| string_ | `4` |
 | `half` | 是否允许半选 | _boolean_ | `false` |
 | `half-icon` | 半选时图标的样式，只有在 `half` 为 `true` 时才有效| _string_ | `star-half-full` |
+| `namespace` | 图标的命名空间, 可扩展自定义图标库 |  _string_ | `var-icon` |
 | `disabled` | 是否禁止评分 | _boolean_ | `false`|
 | `disabled-color` | 禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`| _string_ | `-` |
 | `readonly` | 是否使用评分只读 | _boolean_ | `false` |

diff --git a/packages/varlet-ui/src/rate/props.ts b/packages/varlet-ui/src/rate/props.ts
@@ -31,6 +31,9 @@ export const props = {
     type: [String, Number],
     default: '2',
   },
+  namespace: {
+    type: String,
+  },
   half: {
     type: Boolean,
     default: false,

diff --git a/packages/varlet-ui/types/rate.d.ts b/packages/varlet-ui/types/rate.d.ts
@@ -9,6 +9,7 @@ export interface RateProps {
   disabledColor?: string
   emptyIcon?: string
   halfIcon?: string
+  namespace?: string
   size?: string | number
   gap?: string | number
   half?: boolean