浏览代码

feat(rate): 支持自定义 icon

richard1015 4 年之前
父节点
当前提交
92ff474dde
共有 4 个文件被更改,包括 56 次插入37 次删除
  1. 10 8
      src/packages/__VUE/icon/doc.md
  2. 15 13
      src/packages/__VUE/rate/doc.md
  3. 16 11
      src/packages/__VUE/rate/index.taro.vue
  4. 15 5
      src/packages/__VUE/rate/index.vue

+ 10 - 8
src/packages/__VUE/icon/doc.md

@@ -116,18 +116,20 @@ import './assets/font/iconfont.css';
 
 ```
 
+自定义 iconfont [Demo示例](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15) 
+
 ## API
 
 ### Props
 
-| 参数         | 说明                             | 类型             | 默认值           |
-|--------------|----------------------------------|------------------|------------------|
-| name         | 图标名称或图片链接               | String           | -                |
-| color        | 图标颜色                         | String           | -                |
-| size         | 图标大小,如 `20px` `2em` `2rem` | String or Number | -                |
-| font-class-name | 字体基础类名     | String           | `nutui-iconfont` |
-| class-prefix | 类名前缀,用于使用自定义图标     | String           | `nut-icon` |
-| tag          | HTML 标签                        | String           | `i`              |
+| 参数            | 说明                                    | 类型             | 默认值           |
+|-----------------|-----------------------------------------|------------------|------------------|
+| name            | 图标名称或图片链接                      | String           | -                |
+| color           | 图标颜色                                | String           | -                |
+| size            | 图标大小,如 `20px` `2em` `2rem`        | String or Number | -                |
+| font-class-name | 自定义 icon 字体基础类名                | String           | `nutui-iconfont` |
+| class-prefix    | 自定义 icon 类名前缀,用于使用自定义图标 | String           | `nut-icon`       |
+| tag             | HTML 标签                               | String           | `i`              |
 
 ### Events
 

+ 15 - 13
src/packages/__VUE/rate/doc.md

@@ -88,19 +88,21 @@ setup() {
 
 ## Prop
 
-| 字段           | 说明                                      | 类型    | 默认值      |
-|----------------|-------------------------------------------|---------|-------------|
-| v-model        | 当前 star 数,可使用 v-model 双向绑定数据 | Number  | -           |
-| count          | star 总数                                 | Number  | 5           |
-| icon-size      | star 大小                                 | Number  | 18          |
-| active-color   | 图标选中颜色                              | String  | #fa200c     |
-| void-color     | 图标未选中颜色                            | String  | #ccc        |
-| unchecked-icon | 使用图标(未选中)                          | String  | star-n      |
-| checked-icon   | 使用图标(选中)                            | String  | star-fill-n |
-| allow-half     | 是否半星                                  | Boolean | false       |
-| readonly       | 是否只读                                  | Boolean | false       |
-| disabled       | 是否禁用                                  | Boolean | false       |
-| spacing        | 间距                                      | Number  | 20          |
+| 字段            | 说明                                      | 类型    | 默认值           |
+|-----------------|-------------------------------------------|---------|------------------|
+| v-model         | 当前 star 数,可使用 v-model 双向绑定数据 | Number  | -                |
+| count           | star 总数                                 | Number  | 5                |
+| icon-size       | star 大小                                 | Number  | 18               |
+| active-color    | 图标选中颜色                              | String  | #fa200c          |
+| void-color      | 图标未选中颜色                            | String  | #ccc             |
+| unchecked-icon  | 使用图标(未选中)[图标名称](#/icon)    | String  | star-n           |
+| checked-icon    | 使用图标(选中)[图标名称](#/icon)       | String  | star-fill-n      |
+| font-class-name | 自定义icon 字体基础类名                   | String  | `nutui-iconfont` |
+| class-prefix    | 自定义icon 类名前缀,用于使用自定义图标   | String  | `nut-icon`       |
+| allow-half      | 是否半星                                  | Boolean | false            |
+| readonly        | 是否只读                                  | Boolean | false            |
+| disabled        | 是否禁用                                  | Boolean | false            |
+| spacing         | 间距                                      | Number  | 20               |
 
 ## Event
 | 字段   | 说明                       | 回调参数 |

+ 16 - 11
src/packages/__VUE/rate/index.taro.vue

@@ -1,35 +1,32 @@
 <template>
   <view :class="classes">
-    <view
-      class="nut-rate-item"
-      v-for="n in count"
-      :key="n"
-      :style="{ marginRight: pxCheck(spacing) }"
-    >
+    <view class="nut-rate-item" v-for="n in count" :key="n" :style="{ marginRight: pxCheck(spacing) }">
       <nut-icon
         :size="iconSize"
         class="nut-rate-item__icon"
         @click="onClick(1, n)"
         :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
         :color="n <= modelValue ? activeColor : voidColor"
+        :font-class-name="fontClassName"
+        :class-prefix="classPrefix"
         :name="n <= modelValue ? checkedIcon : uncheckedIcon"
       />
       <nut-icon
         v-if="allowHalf && modelValue + 1 > n"
         class="nut-rate-item__icon nut-rate-item__icon--half"
         @click="onClick(2, n)"
+        :font-class-name="fontClassName"
+        :class-prefix="classPrefix"
         :color="n <= modelValue ? activeColor : voidColor"
         :size="iconSize"
         :name="checkedIcon"
       />
       <nut-icon
         v-else-if="allowHalf && modelValue + 1 < n"
-        class="
-          nut-rate-item__icon
-          nut-rate-item__icon--disabled
-          nut-rate-item__icon--half
-        "
+        class="nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half"
         @click="onClick(2, n)"
+        :font-class-name="fontClassName"
+        :class-prefix="classPrefix"
         :color="voidColor"
         :size="iconSize"
         :name="uncheckedIcon"
@@ -88,6 +85,14 @@ export default create({
     spacing: {
       type: [String, Number],
       default: 14
+    },
+    classPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    fontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['update:modelValue', 'change'],

+ 15 - 5
src/packages/__VUE/rate/index.vue

@@ -11,23 +11,25 @@
         :size="iconSize"
         class="nut-rate-item__icon"
         :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
+        :font-class-name="fontClassName"
+        :class-prefix="classPrefix"
         :color="n <= modelValue ? activeColor : voidColor"
         :name="n <= modelValue ? checkedIcon : uncheckedIcon"
       />
       <nut-icon
         v-if="allowHalf && modelValue + 1 > n"
         class="nut-rate-item__icon nut-rate-item__icon--half"
+        :font-class-name="fontClassName"
+        :class-prefix="classPrefix"
         :color="n <= modelValue ? activeColor : voidColor"
         :size="iconSize"
         :name="checkedIcon"
       />
       <nut-icon
         v-else-if="allowHalf && modelValue + 1 < n"
-        class="
-          nut-rate-item__icon
-          nut-rate-item__icon--disabled
-          nut-rate-item__icon--half
-        "
+        class="nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half"
+        :font-class-name="fontClassName"
+        :class-prefix="classPrefix"
         :color="voidColor"
         :size="iconSize"
         :name="uncheckedIcon"
@@ -85,6 +87,14 @@ export default create({
     spacing: {
       type: [String, Number],
       default: 14
+    },
+    classPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    fontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['update:modelValue', 'change'],