feat: rate icon 替换，文档修改

src/packages/__VUE/rate/common.ts

@@ -1,5 +1,8 @@
 import { computed, Ref, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import Taro from '@tarojs/taro';
+import { StarN } from '@nutui/icons-vue';
+import { StarN as StarNTaro } from '@nutui/icons-vue-taro';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
 const { componentName } = createComponent('rate');
@@ -14,9 +17,11 @@ const useComponent = (touchable: Boolean = true) => {
         type: [String, Number],
         default: 0
       },
-      iconSize: {
-        type: [String, Number],
-        default: 18
+      icon: {
+        type: Object,
+        default: () => {
+          return Taro.getEnv() === 'WEB' ? StarN : StarNTaro;
+        }
       },
       activeColor: {
         type: String,
@@ -26,14 +31,6 @@ const useComponent = (touchable: Boolean = true) => {
         type: String,
         default: ''
       },
-      uncheckedIcon: {
-        type: String,
-        default: 'star-n'
-      },
-      checkedIcon: {
-        type: String,
-        default: 'star-fill-n'
-      },
       readonly: {
         type: Boolean,
         default: false
@@ -53,18 +50,11 @@ const useComponent = (touchable: Boolean = true) => {
       spacing: {
         type: [String, Number],
         default: 14
-      },
-      classPrefix: {
-        type: String,
-        default: 'nut-icon'
-      },
-      fontClassName: {
-        type: String,
-        default: 'nutui-iconfont'
       }
     },
+    components: { StarN },
     emits: ['update:modelValue', 'change'],
-    setup(props: any, { emit }: any) {
+    setup(props: any, { emit, slots }: any) {
       const rateRefs = ref<HTMLElement[]>([]);
       const classes = computed(() => {
         const prefixCls = componentName;
@@ -127,7 +117,9 @@ const useComponent = (touchable: Boolean = true) => {
         onClick,
         pxCheck,
         rateRefs,
-        refRandomId
+        refRandomId,
+        renderIcon,
+        slots
       };
     }
   };

src/packages/__VUE/rate/demo.vue

@@ -7,14 +7,11 @@
     <nut-rate allow-half v-model="state.val1"></nut-rate>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="state.val2"></nut-rate>
+    <nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-rate :count="6" v-model="state.val3"></nut-rate>
 
-    <h2>{{ translate('title4') }}</h2>
-    <nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate>
-
     <h2>{{ translate('title5') }}</h2>
     <nut-rate disabled v-model="state.val5"></nut-rate>
 
@@ -23,14 +20,12 @@
 
     <h2>{{ translate('title7') }}</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
-
-    <h2>{{ translate('title8') }}</h2>
-    <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive } from 'vue';
+import { HeartFill, StarFillN } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const { createDemo, translate } = createComponent('rate');
@@ -61,6 +56,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { HeartFill, StarFillN },
   setup() {
     initTranslate();
     const state = reactive({
@@ -80,7 +76,9 @@ export default createDemo({
     return {
       state,
       onChange,
-      translate
+      translate,
+      HeartFill,
+      StarFillN
     };
   }
 });

src/packages/__VUE/rate/doc.en-US.md

@@ -8,14 +8,10 @@ Use for quick rating actions, or to showcase reviews.
 
 ``` javascript
 import { createApp } from 'vue';
-//vue
-import { Rate,Icon } from '@nutui/nutui';
-//taro
-import { Rate,Icon } from '@nutui/nutui-taro';
+import { Rate } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Rate);
-app.use(Icon);
 ```
 
 ### Basic Usage
@@ -61,14 +57,16 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+    <nut-rate :icon="HeartFill" v-model="value" />
 </template>
 <script lang="ts">
 import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
 export default {
+    components: { HeartFill },
     setup() {
         const value = ref(3);
-        return { value }
+        return { value, HeartFill }
     }
 }
 </script>
@@ -94,25 +92,6 @@ export default {
 ```
 :::
 
-### Custom color
-
-:::demo
-```html
-<template>
-    <nut-rate active-color="#FFC800" v-model="value" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
-
 ### disabled state
 
 :::demo
@@ -173,25 +152,6 @@ export default {
 ```
 :::
 
-### Custom size 35px
-
-:::demo
-```html
-<template>
-    <nut-rate v-model="value" icon-size="35" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
 
 
 ## API
@@ -201,13 +161,8 @@ export default {
 |--------------------|----------------------------------------------------------------------------------|---------|------------------|
 | v-model            | The current number of stars, you can use v-model to bind data in both directions | Number  | -                |
 | count              | Total number of stars                                                            | Number  | 5                |
-| icon-size          | Star size                                                                        | Number  | 18               |
 | active-color       | Icon selection color                                                             | String  | #fa200c          |
 | void-color         | Icon unselected color                                                            | String  | #ccc             |
-| unchecked-icon     | Use icon (unchecked)[icon name](#/en-US/component/icon)                                          | String  | star-n           |
-| checked-icon       | Use icon (checked)[icon name](#/en-US/component/icon)                                            | String  | star-fill-n      |
-| font-class-name    | Custom icon font base class name                                                 | String  | `nutui-iconfont` |
-| class-prefix       | Custom icon class name prefix for using custom icons                             | String  | `nut-icon`       |
 | allow-half         | half star                                                                        | Boolean | false            |
 | readonly           | read-only                                                                        | Boolean | false            |
 | disabled           | whether to disable                                                               | Boolean | false            |

src/packages/__VUE/rate/doc.md

@@ -8,14 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
-//vue
-import { Rate,Icon } from '@nutui/nutui';
-//taro
-import { Rate,Icon } from '@nutui/nutui-taro';
+import { Rate } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Rate);
-app.use(Icon);
 ```
 
 
@@ -62,14 +58,16 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+    <nut-rate :icon="HeartFill" v-model="value" />
 </template>
 <script lang="ts">
 import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
 export default {
+    components: { HeartFill },
     setup() {
         const value = ref(3);
-        return { value }
+        return { value, HeartFill }
     }
 }
 </script>
@@ -95,25 +93,6 @@ export default {
 ```
 :::
 
-### 自定义颜色
-
-:::demo
-```html
-<template>
-    <nut-rate active-color="#FFC800" v-model="value" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
-
 ### 禁用状态
 
 :::demo
@@ -174,25 +153,6 @@ export default {
 ```
 :::
 
-### 自定义尺寸
-
-:::demo
-```html
-<template>
-    <nut-rate v-model="value" icon-size="35" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
 
 
 ## API
@@ -202,13 +162,8 @@ export default {
 |------------------------------------|-------------------------------------------|---------|------------------|
 | 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                     | 使用图标(未选中)[图标名称](#/zh-CN/component/icon)        | String  | star-n           |
-| checked-icon                       | 使用图标(选中)[图标名称](#/zh-CN/component/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            |

src/packages/__VUE/rate/template.html

@@ -1,16 +1,36 @@
 <view :class="classes" @touchstart="onTouchStart" @touchmove="onTouchMove">
-    <view class="nut-rate-item" v-for="n in Number(count)" :key="n" ref="rateRefs" :id="'rateRefs-' + refRandomId + 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 && Number(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 <= Number(modelValue) + 1 ? activeColor : voidColor" :size="iconSize" :name="checkedIcon" />
-        <nut-icon v-else-if="allowHalf && Number(modelValue) + 1 < n"
-            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" />
+    <view
+      class="nut-rate-item"
+      v-for="n in Number(count)"
+      :key="n"
+      ref="rateRefs"
+      :id="'rateRefs-' + refRandomId + n"
+      :style="{ marginRight: pxCheck(spacing) }"
+    >
+    <view>
+      <component
+        :is="renderIcon(icon)"
+        class="nut-rate-item__icon"
+        :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
+        :color="n <= modelValue ? activeColor : voidColor"
+        @click="onClick(1, n)"
+      ></component>
     </view>
-</view>
+      <view class="nut-rate-item__icon--half" v-if="allowHalf && Number(modelValue) + 1 > n">
+        <component
+          :is="renderIcon(icon)"
+          class="nut-rate-item__icon"
+          :color="n <= Number(modelValue) + 1 ? activeColor : voidColor"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+      <view class="nut-rate-item__icon--half" v-else-if="allowHalf && Number(modelValue) + 1 < n">
+        <component
+          :is="renderIcon(icon)"
+          class="nut-rate-item__icon nut-rate-item__icon--disabled"
+          :color="voidColor"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+    </view>
+  </view>

src/packages/__VUE/searchbar/doc.en-US.md

@@ -8,12 +8,7 @@ Search bar
     
 ```javascript
 import { createApp } from 'vue';
-
-// vue
 import { Searchbar } from '@nutui/nutui';
-// taro
-import { Searchbar } from '@nutui/nutui-taro';
-
 const app = createApp();
 app.use(Searchbar);
 ```    

src/packages/__VUE/searchbar/doc.md

@@ -8,12 +8,7 @@
     
 ```javascript
 import { createApp } from 'vue';
-
-// vue
 import { Searchbar } from '@nutui/nutui';
-// taro
-import { Searchbar } from '@nutui/nutui-taro';
-
 const app = createApp();
 app.use(Searchbar);
 

src/sites/mobile-taro/vue/src/dentry/pages/rate/index.vue

@@ -7,18 +7,11 @@
     <nut-rate allow-half v-model="state.val1"></nut-rate>
 
     <h2>自定义 icon </h2>
-    <nut-rate
-      checked-icon="heart-fill1"
-      unchecked-icon="heart"
-      v-model="state.val2"
-    ></nut-rate>
+    <nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate>
 
     <h2>自定义数量</h2>
     <nut-rate :count="6" v-model="state.val3"></nut-rate>
 
-    <h2>自定义颜色</h2>
-    <nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate>
-
     <h2>禁用状态</h2>
     <nut-rate disabled v-model="state.val5"></nut-rate>
 
@@ -27,14 +20,15 @@
 
     <h2>绑定事件</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
-    <h2>自定义尺寸 35px</h2>
-    <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
 <script>
 import { reactive, getCurrentInstance } from 'vue';
+import { HeartFill, StarFillN } from '@nutui/icons-vue-taro';
+
 export default {
+  components: { HeartFill, StarFillN },
   setup() {
     let { proxy } = getCurrentInstance();
 
@@ -54,7 +48,9 @@ export default {
     };
     return {
       state,
-      onChange
+      onChange,
+      HeartFill,
+      StarFillN
     };
   }
 };