plain-design 1.0.0-beta.12 → 1.0.0-beta.120

package/src/packages/components/Image/index.tsx

@@ -1,7 +1,7 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from 'plain-design-composition';
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from '@peryl/react-compose';
 import './image.scss';
-import {unit} from "plain-utils/string/unit";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {unit} from "@peryl/utils/unit";
+import {createEnum} from "@peryl/utils/createEnum";
 import {Icon} from "../Icon";
 import {$image} from "../$image";
 import {LoadingMask} from "../LoadingMask";
@@ -30,6 +30,14 @@ export const ImagePropsOptions = {
   alt: { type: String },                                                        // 图片描述
   fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
   position: { type: String, default: 'top center' },                            // 图片 object-position 属性
+  maxHeight: { type: [String, Number] },                                        // 最大高度
+  minHeight: { type: [String, Number] },                                        // 最小高度
+  maxWidth: { type: [String, Number] },                                         // 最大宽度
+  minWidth: { type: [String, Number] },                                         // 最小宽度
+  width: { type: [String, Number] },                                            // 图片宽度
+  height: { type: [String, Number] },                                           // 图片高度
+  hideTips: { type: Boolean },                                                  // 隐藏提示文本
+  urlPrefix: { type: String },                                                  // 图片地址前缀
 };
 
 /**
@@ -56,16 +64,9 @@ export const Image = designComponent({
     formatImagePath,
   },
   props: {
-    src: { type: String as PropType<string | null> },                          // 图片地址
-    status: { type: String as PropType<typeof eImageStatus.TYPE> },      // 当前转股固态，fill, container, cover, none, scale-down
-    previewOnClick: { type: Boolean, default: true },                          // 是否点击的时候放大预览图片
-    maxHeight: { type: [String, Number] },                                     // 最大高度
-    minHeight: { type: [String, Number] },                                     // 最小高度
-    maxWidth: { type: [String, Number] },                                      // 最大宽度
-    minWidth: { type: [String, Number] },                                      // 最小宽度
-    width: { type: [String, Number] },                                         // 图片宽度
-    height: { type: [String, Number] },                                        // 图片高度
-    urlPrefix: { type: String },                                               // 图片地址前缀
+    src: { type: String as PropType<string | null> },                           // 图片地址
+    status: { type: String as PropType<typeof eImageStatus.TYPE> },             // 当前状态
+    previewOnClick: { type: Boolean, default: true },                           // 是否点击的时候放大预览图片
     ...ImagePropsOptions,
   },
   emits: {
@@ -99,6 +100,7 @@ export const Image = designComponent({
         emit.onSuccess(state.src!);
       };
       image.onerror = (e) => {
+        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
         state.status = eImageStatus.error;
         emit.onError(e);
       };
@@ -125,9 +127,9 @@ export const Image = designComponent({
     });
 
     const tip = {
-      [eImageStatus.empty]: i18n('image.noPicture').d('无图片'),
-      [eImageStatus.pending]: i18n('base.loading').d('加载中'),
-      [eImageStatus.error]: i18n('base.loadFailed').d('加载失败'),
+      [eImageStatus.empty]: i18n.$it('image.noPicture').d('无图片'),
+      [eImageStatus.pending]: i18n.$it('base.loading').d('加载中'),
+      [eImageStatus.error]: i18n.$it('base.loadFailed').d('加载失败'),
     };
 
     const handler = {
@@ -148,7 +150,7 @@ export const Image = designComponent({
           return (
             <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
               <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
-              <span>{tip[status.value]}</span>
+              {!props.hideTips && <span>{tip[status.value]}</span>}
               {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
             </div>
           );

package/src/packages/components/ImagePreviewer/ImagePreviewer.tsx

@@ -0,0 +1,574 @@
+import {computed, designComponent, iHTMLDivElement, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "./image-previewer.utils";
+import {createEffects} from "@peryl/utils/createEffects";
+import {getRectAutoFormat} from "@peryl/utils/getRectAutoFormat";
+import {addElementListener} from "@peryl/utils/addElementListener";
+import {delay} from "@peryl/utils/delay";
+import Carousel from "../Carousel";
+import CarouselItem from "../CarouselItem";
+import {ImagePreviewerGallery} from "./ImagePreviewerGallery";
+import {ImagePreviewerCarouselImage} from "./ImagePreviewerCarouselImage";
+import './image-previewer.scss';
+import {ImagePreviewerButtonBar} from "./ImagePreviewerButtonBar";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
+import $previewer from "../$previewer";
+import {buildCycleIndexList} from "../../utils/buildCycleIndexList";
+import {getDeviceInfo} from "../../utils/getDeviceInfo";
+
+export const ImagePreviewer = designComponent({
+  name: 'image-preview-component',
+  props: {
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true },
+    closable: { type: Boolean }
+  },
+  inheritPropsType: iHTMLDivElement,
+  setup({ props }) {
+
+    const { effects: setupEffects } = createEffects();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement, carousel: Carousel });
+
+    const state = reactive({
+      /*当前显示的图片索引*/
+      current: props.option.current || 0,
+      /*shadowImageElement显示隐藏有过度时间，这里等过度时间结束再做显示隐藏*/
+      show: false,
+      aspectRatio: null as null | number,
+      closing: false,
+      /*标记图片的thumb url已经加载完毕*/
+      readyMap: {} as Record<string, boolean | undefined>
+    });
+
+    const classes = useClasses(() => [
+      'image-previewer-component',
+      {
+        'image-previewer-component-waiting': !state.show
+      }
+    ]);
+
+    const galleryStyles = useStyles(style => {
+      style.height = `${props.option.galleryHeight}px`;
+    });
+
+    const maskStyles = useStyles(style => {
+      style.backgroundColor = props.option.maskColor || 'rgba(0,0,0,0.9)';
+    });
+
+    const methods = {
+      /**
+       * 关闭预览
+       * @author  韦胜健
+       * @date    2024/1/5 11:24
+       */
+      close: async () => {
+        if (state.closing) {return;}
+        state.closing = true;
+
+        const currentImgElement = refs.carousel!.refs.el!.querySelector('img[data-active=true]') as undefined | HTMLImageElement;
+        /*当前渲染的图片如果不存在，虽然不可能，这里直接关闭previewer*/
+        if (!currentImgElement) {
+          $previewer.close(props.option.id);
+          return;
+        }
+
+        /*当前正在显示的图片元素，关闭时让这个元素显示一个缩小动画*/
+        const currentUrl = props.option.urls[state.current!].url;
+        const sourceImgElement = props.option.imageElement?.getAttribute('src') === currentUrl ? props.option.imageElement : (Array.from(document.querySelectorAll('img')) as HTMLImageElement[]).find(i => i.getAttribute('src') === currentUrl && i !== currentImgElement && !i.hasAttribute('data-ignore'));
+
+        const currentRect = getCenterRect({ imageElement: currentImgElement, containerElement: refs.carousel!.refs.el! });
+
+        /*页面上原始的图片元素如果存在，则让当前显示的图片元素缩放并且移动到这个原始位置在关闭，否则移动到屏幕正中间在关闭*/
+        const sourceRect = !!sourceImgElement ? getRectAutoFormat(sourceImgElement) : (() => {
+          const { clientHeight, clientWidth } = document.documentElement;
+          const width = 10;
+          const height = 10;
+          const top = Number(((clientHeight - height) / 2).toFixed(2));
+          const left = Number(((clientWidth - width) / 2).toFixed(2));
+          return { top, left, width, height };
+        })();
+
+        currentImgElement.style.transition = 'all ease 300ms';
+        const newScale = Number(((sourceRect.width / currentRect.width)).toFixed(2));
+        const newLeft = Math.ceil(sourceRect.left - (currentRect.left + (currentRect.width * (1 - newScale) / 2)));
+        const newTop = Math.ceil(sourceRect.top - (currentRect.top + (currentRect.height * (1 - newScale) / 2)));
+        // console.log({ sourceRect, currentRect, newTop, newLeft });
+        state.show = false;
+        const clearListener = addElementListener(currentImgElement, 'transitionend', () => {
+          clearListener();
+          if (!!props.option?.imageElement) {
+            props.option.imageElement.style.opacity = '';
+          }
+          $previewer.close(props.option.id);
+        });
+        await delay(0);
+        currentImgElement.style.transform = `translate3d(${newLeft}px,${newTop}px,0) scale(${newScale}) rotate(0)`;
+      },
+      /**
+       * 切换到上一张
+       * @author  韦胜健
+       * @date    2024/1/8 17:35
+       */
+      prev: () => {
+        let current = state.current - 1;
+        if (current < 0) {
+          current = props.option.urls.length - 1;
+        }
+        state.current = current;
+      },
+      /**
+       * 切换到下一张
+       * @author  韦胜健
+       * @date    2024/1/8 17:35
+       */
+      next: () => {
+        let current = state.current + 1;
+        if (current > props.option.urls.length - 1) {
+          current = 0;
+        }
+        state.current = current;
+      },
+    };
+
+    const handler = {
+      onDoubleClickImage: () => {
+        props.closable && methods.close();
+      },
+    };
+
+    watch(() => state.current, () => {
+      transformHandler.transformMethods.reset();
+      if (!!props.option.imageElement) {
+        if (props.option.imageElement.style.opacity != props.option.oldSourceImageOpacity) {
+          props.option.imageElement.style.opacity = props.option.oldSourceImageOpacity || "";
+        }
+      }
+    });
+
+    const transformHandler = (() => {
+      const transformState = reactive({
+        transformData: {
+          /*当前缩放的比例*/
+          scale: 1,
+          /*当前横向移动距离*/
+          left: 0,
+          /*当前纵向移动距离*/
+          top: 0,
+          /*当前旋转角度*/
+          rotate: 0,
+        },
+        /*保存开始缩放时当前image的初始大小*/
+        currentImageRect: { top: 0, left: 0, height: 0, width: 0 },
+        /*是否处于移动端缩小准备退出的状态*/
+        mobileClosing: false,
+        /*双指缩放状态*/
+        mobileScaling: null as null | {
+          startScale: number,/*双指拖拽开始时已经缩放的大小*/
+          msg?: any,/*调试信息*/
+        },
+        previousTouchstartTimestamp: 0,
+      });
+
+      const handler = {
+        /**
+         * 使用鼠标滚轮的时候设置缩放比例
+         * @author  韦胜健
+         * @date    2024/1/5 14:20
+         */
+        onWheel: (e: WheelEvent) => {
+          if (props.option.disableZoomOnWheel) {
+            return;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+          transformMethods.setScale(Number((transformState.transformData.scale - e.deltaY / 100 * 0.05).toFixed(2)));
+        },
+        /**
+         * 拖拽的时候处理移动或者缩放
+         * @author  韦胜健
+         * @date    2024/1/5 14:21
+         */
+        touchstart: (e: TouchEvent | MouseEvent) => {
+
+          if ('touches' in e && e.touches.length == 1 && getDeviceInfo().deviceType === 'mobile') {
+            const currentTouchstartTimestamp = Date.now();
+            if (!!transformState.previousTouchstartTimestamp) {
+              if (currentTouchstartTimestamp - transformState.previousTouchstartTimestamp < 200) {
+                /*100ms内点击了两次，自动关闭*/
+                props.closable && methods.close();
+                return;
+              }
+            }
+            transformState.previousTouchstartTimestamp = currentTouchstartTimestamp;
+          }
+
+          /*标记当前是缩放还是移动*/
+          let handleType = 'move' as 'scale' | 'move';
+
+          /*拖拽副作用*/
+          const { effects: touchEffects } = createEffects();
+
+          /**
+           * 单指和双指会同时触发touchstart，这里除了双指缩放之外的其他情况要自动停止并且清理掉自身的副作用
+           * @author  韦胜健
+           * @date    2024/1/9 21:42
+           */
+          const autoClearIfDoubleTouching = (e: MouseEvent | TouchEvent) => {
+            if ('touches' in e && e.touches.length === 2) {
+              touchEffects.clear();
+              return true;
+            }
+            return false;
+          };
+
+          if ('touches' in e && e.touches.length > 1) {
+            /*如果是双指拖动，则为缩放，否则都是移动*/
+            handleType = 'scale';
+          }
+
+          if (handleType === 'move') {
+            /*只有缩放/旋转的情况下才能拖拽移动，否则拖拽时右Carousel处理横向切换图片*/
+            if (isTransforming.value) {
+              /*---------------------------------------（单指/鼠标）拖拽移动-------------------------------------------*/
+
+              /*拖拽初始状态*/
+              let touchState = {
+                startX: 'touches' in e ? e.touches[0].clientX : e.clientX,
+                startY: 'touches' in e ? e.touches[0].clientY : e.clientY,
+                startTop: transformState.transformData.top,
+                startLeft: transformState.transformData.left,
+              };
+              /*处理移动*/
+              const touchmove = (e: MouseEvent | TouchEvent) => {
+                if (autoClearIfDoubleTouching(e)) {return;}
+                e.preventDefault();
+                e.stopPropagation();
+                const moveX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+                const moveY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+                transformState.transformData.top = Number((touchState.startTop + (moveY - touchState.startY)).toFixed(2));
+                transformState.transformData.left = Number((touchState.startLeft + (moveX - touchState.startX)).toFixed(2));
+              };
+              touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false }));
+              touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+              touchEffects.push(addWindowListener('mousemove', touchmove, { passive: false }));
+              touchEffects.push(addWindowListener('mouseup', touchEffects.clear, { passive: false }));
+            } else {
+              if (getDeviceInfo().deviceType === 'mobile' && 'touches' in e && e.touches.length === 1) {
+
+                /*---------------------------------------单指拖拽关闭-------------------------------------------*/
+                if (props.closable) {
+                  /*移动端的情况下，如果纵向移动超过一定距离，则一边移动一边缩小，缩小到一定程度关闭预览*/
+                  let imageElement = (e.currentTarget as HTMLDivElement).querySelector('img') as HTMLImageElement;
+                  let mobileTouchState = {
+                    startX: e.touches[0].clientX,
+                    startY: e.touches[0].clientY,
+                    touching: null as null | { scale: number },
+                  };
+                  const touchmove = (e: TouchEvent) => {
+                    if (autoClearIfDoubleTouching(e)) {return;}
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let durX = e.touches[0].clientX - mobileTouchState.startX;
+                    let durY = e.touches[0].clientY - mobileTouchState.startY;
+                    if (!mobileTouchState.touching) {
+                      if (durY > durX && durY > 10) {
+                        transformState.mobileClosing = true;
+                        mobileTouchState.touching = { scale: 1 };
+                        /*拖拽结束时的处理动作*/
+                        touchEffects.push(async () => {
+                          transformState.mobileClosing = false;
+
+                          if (mobileTouchState.touching!.scale < 0.9) {
+                            /*取消缩放，改为实际设置大小，是的关闭动画合理*/
+                            methods.close();
+                          } else {
+                            /*取消缩放，还原原来的状态*/
+                            imageElement.style.transition = "all ease 300ms";
+                            imageElement.style.transform = "translate3d(0,0,0) scale(1)";
+                            delay(300).then(() => {
+                              imageElement.style.transition = "";
+                              imageElement.style.transform = "";
+                            });
+                          }
+
+                          mobileTouchState.touching = null;
+                        });
+                      }
+                    }
+                    if (!mobileTouchState.touching) {
+                      return;
+                    }
+                    if (durY < 0) {durY = 0;}
+                    if (durY === 0) {
+                      /*移动距离为0，不做缩放移动*/
+                      imageElement.style.transform = '';
+                    } else {
+                      /*按照移动距离进行缩放移动*/
+                      const height = Math.ceil(document.body.clientHeight / 3);
+                      const scale = Number((1 - durY / height).toFixed(2));
+                      mobileTouchState.touching.scale = scale;
+                      imageElement.style.transform = `translate3d(0,${durY}px,0) scale(${scale})`;
+                    }
+                  };
+                  touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false }));
+                  touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+                }
+              }
+            }
+
+          } else {
+            /*---------------------------------------双指拖拽缩放-------------------------------------------*/
+
+            if (!('touches' in e)) {return;}
+            const startTouchesDistance = Math.floor(Math.sqrt(Math.pow((e.touches[1].clientX - e.touches[0].clientX), 2) + Math.pow((e.touches[1].clientY - e.touches[0].clientY), 2)));
+
+            transformState.mobileScaling = { startScale: transformState.transformData.scale };
+
+            const touchmove = (e: TouchEvent) => {
+              e.stopPropagation();
+              e.preventDefault();
+
+              const moveTouchesDistance = Math.floor(Math.sqrt(Math.pow((e.touches[1].clientX - e.touches[0].clientX), 2) + Math.pow((e.touches[1].clientY - e.touches[0].clientY), 2)));
+              const durationDistance = Math.floor(moveTouchesDistance - startTouchesDistance);
+              const durScale = Number((durationDistance / 300).toFixed(2));
+              let newScale = Number((durScale + transformState.mobileScaling!.startScale).toFixed(2));
+              if (newScale < 1) {
+                newScale = 1;
+              }
+              transformMethods.setScale(newScale);
+              transformState.mobileScaling!.msg = `newScale:${newScale}`;
+            };
+
+            touchEffects.push(() => {
+              transformState.mobileScaling = null;
+            });
+
+            touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false, }));
+            touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+          }
+        },
+      };
+
+      const transformStyles = useStyles(style => {
+        let left = transformState.transformData.left;
+        let top = transformState.transformData.top;
+
+        if (transformState.transformData.scale != 1) {
+
+          /**
+           * 限制位置不能超过边界
+           * @author  韦胜健
+           * @date    2024/1/5 15:47
+           */
+
+          let { clientHeight, clientWidth } = refs.carousel!.refs.el!;
+
+          const currentWidth = Number((transformState.currentImageRect.width * transformState.transformData.scale).toFixed(0));
+          const currentHeight = Number((transformState.currentImageRect.height * transformState.transformData.scale).toFixed(0));
+
+          if (currentWidth > clientWidth) {
+            const overWidth = Number(((currentWidth - clientWidth) / 2).toFixed(2));
+            if (left < -overWidth) {
+              left = -overWidth;
+            }
+            if (left > overWidth) {
+              left = overWidth;
+            }
+          } else {
+            left = 0;
+          }
+
+          if (currentHeight > clientHeight) {
+            const overHeight = Number(((currentHeight - clientHeight) / 2).toFixed(2));
+            if (top < -overHeight) {
+              top = -overHeight;
+            }
+            if (top > overHeight) {
+              top = overHeight;
+            }
+          } else {
+            top = 0;
+          }
+        }
+
+        style.transform = `translate3d(${left}px,${top}px,0) scale(${transformState.transformData.scale}) rotate(${transformState.transformData.rotate}deg)`;
+      });
+
+      const isTransforming = computed(() => !!transformState.mobileClosing || !!transformState.mobileScaling || transformState.transformData.scale != 1 || transformState.transformData.top != 0 || transformState.transformData.left != 0 || transformState.transformData.rotate != 0);
+
+      const transformMethods = {
+        zoomIn: () => {
+          transformMethods.setScale(Number((transformState.transformData.scale + 0.25).toFixed(1)));
+        },
+        zoomOut: () => {
+          transformMethods.setScale(Number((transformState.transformData.scale - 0.25).toFixed(1)));
+        },
+        anticlockwise: () => {
+          transformState.transformData.rotate = Number((transformState.transformData.rotate - 45).toFixed(1));
+        },
+        clockwise: () => {
+          transformState.transformData.rotate = Number((transformState.transformData.rotate + 45).toFixed(1));
+        },
+        /**
+         * 设置缩放比例，当比例小于1时设置为1，并且重置所有变化
+         * @author  韦胜健
+         * @date    2024/1/5 14:20
+         */
+        setScale: (val: number) => {
+          if (val < 1) {
+            val = 1;
+          }
+          if (val == transformState.transformData.scale) {
+            return;
+          }
+          if (transformState.transformData.scale === 1) {
+            /*保存图片初始的大小尺寸*/
+            transformState.currentImageRect = getRectAutoFormat(refs.el?.querySelector('img[data-active=true]') as HTMLImageElement);
+          }
+          if (val === 1) {
+            transformMethods.reset();
+          } else {
+            transformState.transformData.scale = val;
+          }
+        },
+        /**
+         * 重置所有变化
+         * @author  韦胜健
+         * @date    2024/1/5 14:20
+         */
+        reset: () => {
+          transformState.transformData = {
+            scale: 1,
+            left: 0,
+            top: 0,
+            rotate: 0,
+          };
+        },
+      };
+
+      return { transformState, handler, isTransforming, transformStyles, transformMethods };
+    })();
+
+    const carouselOptimizer = (() => {
+
+      /*原始索引映射到环列表，在环列表中距离当前显示的索引的距离*/
+      const index2distance = computed(() => {
+        return buildCycleIndexList({ length: props.option.urls.length, current: state.current }).index2distance;
+      });
+
+      const isShow = (sourceIndex: number) => Math.abs(index2distance.value[sourceIndex]) < 2;
+
+      return {
+        isShow
+      };
+    })();
+
+    const keyboardHandler = (() => {
+      let isHovering = false;
+      const onMousemove = () => isHovering = true;
+      const onMouseleave = () => isHovering = false;
+      const initialize = () => {
+        if (!props.option.globalKeyboardEvent) {
+          setupEffects.push(addElementListener(refs.el!, 'mousemove', onMousemove));
+          setupEffects.push(addElementListener(refs.el!, 'mouseleave', onMouseleave));
+        }
+        setupEffects.push(
+          addWindowListener('keydown', e => {
+            if (!props.option.globalKeyboardEvent) {
+              if (!isHovering) {return;}
+            }
+            if (e.keyCode === 27) {
+              if (props.option.button == false || (typeof props.option.button === "object" && props.option.button.close == false)) {
+                return;
+              }
+              methods.close();
+            } else if (e.keyCode === 37) {
+              methods.prev();
+            } else if (e.keyCode === 39) {
+              methods.next();
+            }
+          })
+        );
+      };
+      return {
+        initialize,
+      };
+    })();
+
+    onMounted(async () => {
+      state.aspectRatio = refs.el!.offsetWidth / refs.el!.offsetHeight;
+      await delay(23);
+      state.show = true;
+      setupEffects.push(addElementListener(refs.el!, 'wheel', transformHandler.handler.onWheel));
+      keyboardHandler.initialize();
+    });
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return () => (
+      <div className={classes.value} ref={onRef.el} onDoubleClick={handler.onDoubleClickImage}>
+        {state.aspectRatio != null && <>
+          {!!props.option.mask && <div className="image-previewer-component-mask" style={maskStyles.value}/>}
+          <Carousel
+            ref={onRef.carousel}
+            autoPlay={0}
+            v-model={state.current}
+            height={props.option.autoHeight ? undefined : `calc(100% - ${props.option.galleryHeight}px)`}
+            style={{ paddingBottom: `${props.option.separatorHeight}px` }}
+            disableSwiper={transformHandler.isTransforming.value}
+            largeSwitchButton
+            switchButton={props.option.swipeButton == false ? false : undefined}
+            nextSwitchButtonTip="下一张(右按键)"
+            prevSwitchButtonTip="上一张(左按键)"
+          >
+            {props.option.urls.map((item, index) => (
+              <CarouselItem
+                key={index}
+                val={index}
+                onMousedownInner={index === state.current ? transformHandler.handler.touchstart : undefined}
+                onTouchstartInner={index === state.current ? transformHandler.handler.touchstart : undefined}
+                loading={state.readyMap[item.url] !== true}
+              >
+                {carouselOptimizer.isShow(index) && (
+                  <ImagePreviewerCarouselImage
+                    direction={props.option.autoHeight ? 'horizontal' : undefined}
+                    clientRatio={state.aspectRatio!}
+                    data-active={String(index === state.current)}
+                    src={item.url}
+                    style={index === state.current && transformHandler.isTransforming.value ? transformHandler.transformStyles.value : undefined}
+                    onReady={() => {
+                      state.readyMap = {
+                        ...state.readyMap,
+                        [item.url]: true,
+                      };
+                      index === state.current && ImagePreviewerHooks.onImagePreviewerReady.exec({ option: props.option });
+                    }}
+                  />
+                )}
+              </CarouselItem>
+            ))}
+          </Carousel>
+          {props.option.gallery != false && (
+            <ImagePreviewerGallery
+              option={props.option}
+              v-model={state.current}
+              style={galleryStyles.value}
+            />
+          )}
+          {props.option.button !== false && (
+            <ImagePreviewerButtonBar
+              button={props.option.button}
+
+              onZoomIn={transformHandler.transformMethods.zoomIn}
+              onZoomOut={transformHandler.transformMethods.zoomOut}
+              onAnticlockwise={transformHandler.transformMethods.anticlockwise}
+              onClockwise={transformHandler.transformMethods.clockwise}
+              onReset={transformHandler.transformMethods.reset}
+              onClose={methods.close}
+            />
+          )}
+        </>}
+        {/*<div style={{ position: 'fixed', top: '0', left: '0', width: '100%' }}>{JSON.stringify(transformHandler.transformState.mobileScaling)}</div>*/}
+      </div>
+    );
+  },
+});