feat: imagepreview图标修改

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

@@ -314,14 +314,13 @@ app.use(ImagePreview);
 | pagination-visible | Whether to show pagination    | Boolean | false |
 | pagination-color   | Pagination color    | String  | '#fff'  |
 | content-close   | Click image to exit preview    | Boolean  | false  |
-| show-index`v3.1.22`   | Whether to show index    | Boolean  | true  |
-| closeable`v3.1.22`   | Whether to show close icon    | Boolean  | false  |
-| close-icon`v3.1.22`   | Close icon name    | String  | ‘circle-close’  |
-| close-icon-position`v3.1.22`   |  Close icon position,can be set to `top-left`   | String  | ‘top-right’  |  
-| before-close`v3.1.22`  | Callback function before close   | (active: number) => boolean | Promise<`boolean`>  | -  | 
-| max-zoom`v3.1.23`  | Max zoom`Taro isn't supported`   | Number  | 3  | 
-| min-zoom`v3.1.23`  | Min zoom`Taro isn't supported`   | Number  | 1/3  | 
-| is-Loop`v3.2.5`  | Whether to loop   | Boolean  | `true`  | 
+| show-index   | Whether to show index    | Boolean  | true  |
+| closeable   | Whether to show close icon    | Boolean  | false  |
+| close-icon-position   |  Close icon position,can be set to `top-left`   | String  | ‘top-right’  |  
+| before-close  | Callback function before close   | (active: number) => boolean | Promise<`boolean`>  | -  | 
+| max-zoom  | Max zoom`Taro isn't supported`   | Number  | 3  | 
+| min-zoom  | Min zoom`Taro isn't supported`   | Number  | 1/3  | 
+| is-Loop  | Whether to loop   | Boolean  | `true`  | 
 
 ### Data Structure of ImageArray 
 
@@ -341,5 +340,11 @@ app.use(ImagePreview);
 |Event|Description|Arguments|
 |--|--|--|
 |close|Emitted when closing ImagePreview|-|
-|change`v3.1.22`|Emitted when current image changed|无|
+|change|Emitted when current image changed|无|
+
+### Slots
+
+|Event|Description|
+|--|--|
+|closeIcon| Custom close icon|
     

src/packages/__VUE/imagepreview/doc.md

@@ -310,14 +310,13 @@ app.use(ImagePreview);
 | pagination-visible | 分页指示器是否展示    | Boolean | false |
 | pagination-color   | 分页指示器选中的颜色    | String  | '#fff'  |
 | content-close   | 点击图片可以退出预览    | Boolean  | false  |
-| show-index`v3.1.22`  | 是否显示页码    | Boolean  | true  |
-| closeable`v3.1.22`  | 是否显示关闭图标    | Boolean  | false  |
-| close-icon`v3.1.22`   | 关闭图片名称或图片链接    | String  | ‘circle-close’  |
-| close-icon-position`v3.1.22`   | 关闭图标位置，可选值：top-left   | String  | ‘top-right’  |  
-| before-close`v3.1.22`  | 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise   | (active: number) => boolean | Promise<`boolean`>  | -  | 
-| max-zoom`v3.1.23`  | 手势缩放时，最大缩放比例`小程序暂不支持`   | Number  | 3  | 
-| min-zoom`v3.1.23`  | 手势缩放时，最小缩放比例`小程序暂不支持`   | Number  | 1/3  | 
-| is-Loop`v3.2.5`  | 是否循环播放   | Boolean  | `true`  | 
+| show-index  | 是否显示页码    | Boolean  | true  |
+| closeable  | 是否显示关闭图标    | Boolean  | false  |
+| close-icon-position   | 关闭图标位置，可选值：top-left   | String  | ‘top-right’  |  
+| before-close  | 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise   | (active: number) => boolean | Promise<`boolean`>  | -  | 
+| max-zoom  | 手势缩放时，最大缩放比例`小程序暂不支持`   | Number  | 3  | 
+| min-zoom  | 手势缩放时，最小缩放比例`小程序暂不支持`   | Number  | 1/3  | 
+| is-Loop  | 是否循环播放   | Boolean  | `true`  | 
 
 
 ### ImageArray 数据结构
@@ -340,5 +339,11 @@ app.use(ImagePreview);
 |字段|说明|回调参数|
 |--|--|--|
 |close|点击遮罩关闭图片预览时触发|无|
-|change`v3.1.22`|切换图片时触发| index:当前图片索引|
+|change|切换图片时触发| index:当前图片索引|
+
+### Slots
+
+|事件名|说明|
+|--|--|
+|closeIcon| 自定义关闭图片|
     

src/packages/__VUE/imagepreview/index.vue

@@ -36,9 +36,10 @@
       </nut-swiper>
     </view>
     <view class="nut-image-preview-index" v-if="showIndex"> {{ active + 1 }} / {{ mergeImages.length }} </view>
-    <view :class="iconClasses" @click="onClose" v-if="closeable"
-      ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
-    ></view>
+
+    <view :class="iconClasses" @click="onClose" v-if="closeable">
+      <slot name="close-icon"><CircleClose color="#ffffff"></CircleClose></slot>
+    </view>
   </nut-popup>
 </template>
 <script lang="ts">
@@ -50,10 +51,9 @@ import { isArray } from '@/packages/utils/util';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { useRect } from '@/packages/utils/useRect';
 import ImagePreviewItem from './imagePreviewItem.vue';
-import Popup from '../popup/index.vue';
-import Swiper from '../swiper/index.vue';
 import { ImageInterface, baseProps } from './types';
 const { create } = createComponent('image-preview');
+import { CircleClose } from '@nutui/icons-vue';
 
 export default create({
   props: {
@@ -87,8 +87,7 @@ export default create({
   emits: ['close', 'change'],
   components: {
     ImagePreviewItem: ImagePreviewItem,
-    [Popup.name]: Popup,
-    [Swiper.name]: Swiper
+    CircleClose
   },
 
   setup(props, { emit }) {

src/packages/__VUE/popover/demo.vue

@@ -104,7 +104,7 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, h } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('popover');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue';
@@ -267,10 +267,6 @@ export default createDemo({
       }
     ]);
 
-    const renderIcon = (name: any) => {
-      return h(name);
-    };
-
     const chooseItem = (item: unknown, index: number) => {
       console.log(item, index);
     };

src/packages/__VUE/popover/index.vue

@@ -34,7 +34,7 @@
 </template>
 <script lang="ts">
 import { computed, watch, ref, PropType, CSSProperties, onMounted, h } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 import { isArray } from '@/packages/utils/util';
 import { useRect, rect } from '@/packages/utils/useRect';
 const { create } = createComponent('popover');
@@ -72,10 +72,6 @@ export default create({
       width: number;
     }>();
 
-    const renderIcon = (name: any) => {
-      return h(name);
-    };
-
     const popoverArrow = computed(() => {
       const prefixCls = 'nut-popover-arrow';
       const loca = props.location;

src/packages/utils/create/index.ts

@@ -1,3 +1,5 @@
 import { createComponent } from './component';
+import { renderIcon } from './renderIcon';
+
 export * from './mountComponent';
-export { createComponent };
+export { createComponent, renderIcon };

src/packages/utils/create/renderIcon.ts

@@ -0,0 +1,6 @@
+import { h, Component } from 'vue';
+
+export const renderIcon = (icon: Component, props?: any) => {
+  if (icon) return h(icon, props);
+  return '';
+};