@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/ImagePreview.js

@@ -1,94 +1,565 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { toRefs as e, reactive as o, computed as t, watch as i, onMounted as n, resolveComponent as s, openBlock as a, createBlock as l, withCtx as c, createElementVNode as r, withModifiers as p, createElementBlock as u, Fragment as m, renderList as g, createVNode as d, createCommentVNode as h, toDisplayString as f, normalizeStyle as v, render as y, h as w } from "vue";
-import { c as b, a as C } from "./component.js";
-import x from "./Popup.js";
-import T from "./Video.js";
-import I from "./Swiper.js";
-import S from "./SwiperItem.js";
-import j from "./Icon.js";
-import { _ as N } from "./plugin-vue_export-helper.js";
+import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, createVNode, ref, onMounted, Fragment, renderList, toDisplayString, render, h } from "vue";
+import { c as createComponent, a as isPromise } from "./component.js";
+import Popup from "./Popup.js";
+import Video from "./Video.js";
+import Swiper from "./Swiper.js";
+import SwiperItem from "./SwiperItem.js";
+import _sfc_main$2 from "./Icon.js";
+import { u as useTouch } from "./index4.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
 import "./OverLay.js";
 import "./pxCheck.js";
 import "./index3.js";
-const { componentName: k, create: E } = b("imagepreview"), P = E({ props: { show: { type: Boolean, default: false }, images: { type: Array, default: () => [] }, videos: { type: Array, default: () => [] }, contentClose: { type: Boolean, default: true }, initNo: { type: Number, default: 1 }, paginationVisible: { type: Boolean, default: false }, paginationColor: { type: String, default: "#fff" }, autoplay: { type: [Number, String], default: 3e3 }, isWrapTeleport: { type: Boolean, default: false }, showIndex: { type: Boolean, default: true }, closeable: { type: Boolean, default: false }, closeIcon: { type: String, default: "circle-close" }, closeIconPosition: { type: String, default: "top-right" }, beforeClose: Function }, emits: ["close", "change"], components: { [x.name]: x, [T.name]: T, [I.name]: I, [S.name]: S, [j.name]: j }, setup(s2, { emit: a2 }) {
-  e(s2);
-  const l2 = o({ showPop: false, active: 1, maxNo: 1, source: { src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D", type: "video/mp4" }, options: { muted: true, controls: true }, eleImg: null, store: { scale: 1, moveable: false }, lastTouchEndTime: 0 }), c2 = t(() => {
-    let e2 = {};
-    return s2.closeIconPosition == "top-right" ? e2.right = "10px" : e2.left = "10px", e2;
-  }), r2 = () => {
-    if (s2.beforeClose) {
-      const e2 = s2.beforeClose.apply(null, l2.active);
-      C(e2) ? e2.then((e3) => {
-        e3 && p2();
-      }) : e2 && p2();
-    } else
-      p2();
-  }, p2 = () => {
-    l2.showPop = false, l2.store.scale = 1, m2(), l2.active = 1, a2("close");
-  }, u2 = (e2, o2) => Math.hypot(Math.abs(o2.x - e2.x), Math.abs(o2.y - e2.y)), m2 = () => {
-    l2.eleImg.style.transform = "scale(" + l2.store.scale + ")";
-  }, g2 = (e2) => {
-    if (!l2.store.moveable)
-      return;
-    const o2 = l2.store;
-    var t2 = e2.touches, i2 = t2[0], n2 = t2[1];
-    if (n2) {
-      const e3 = u2({ x: i2.pageX, y: i2.pageY }, { x: n2.pageX, y: n2.pageY }) / o2.oriDistance;
-      o2.scale = o2.originScale * e3, o2.scale > 3 && (o2.scale = 3), m2();
+const { componentName: componentName$1, create: create$1 } = createComponent("imagepreviewitem");
+const _sfc_main$1 = create$1({
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    initNo: Number,
+    image: {
+      type: Object,
+      default: () => {
+      }
+    },
+    video: {
+      type: Array,
+      default: () => {
+      }
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    },
+    rootWidth: {
+      type: Number,
+      default: 0
+    },
+    rootHeight: {
+      type: Number,
+      default: 0
+    },
+    minZoom: {
+      type: Number,
+      default: 1 / 3
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
     }
-  }, d2 = () => {
-    l2.lastTouchEndTime = new Date().getTime();
-    const e2 = l2.store;
-    e2.moveable = false, (e2.scale < 1.1 && e2.scale > 1 || e2.scale < 1) && (e2.scale = 1, m2());
-  };
-  return i(() => s2.show, (e2) => {
-    l2.showPop = e2, l2.eleImg = document.querySelector(".nut-imagepreview"), document.addEventListener("touchmove", g2), document.addEventListener("touchend", d2), document.addEventListener("touchcancel", d2);
-  }), n(() => {
-    l2.active = s2.initNo, l2.showPop = s2.show, l2.maxNo = s2.images.length + s2.videos.length;
-  }), { ...e(l2), slideChangeEnd: function(e2) {
-    l2.active = e2 + 1, a2("change", l2.active);
-  }, onClose: r2, closeOnImg: () => {
-    s2.contentClose && r2();
-  }, onTouchStart: (e2) => {
-    if (new Date().getTime() - l2.lastTouchEndTime < 300) {
-      const e3 = l2.store;
-      e3.scale > 1 ? e3.scale = 1 : e3.scale == 1 && (e3.scale = 2), m2();
+  },
+  emits: ["close", "scale"],
+  components: {
+    [Popup.name]: Popup,
+    [Video.name]: Video,
+    [Swiper.name]: Swiper,
+    [SwiperItem.name]: SwiperItem,
+    [_sfc_main$2.name]: _sfc_main$2
+  },
+  setup(props, { emit }) {
+    const state = reactive({
+      scale: 1,
+      moveX: 0,
+      moveY: 0,
+      moving: false,
+      zooming: false,
+      imageRatio: 0,
+      displayWidth: 0,
+      displayHeight: 0
+    });
+    const touch = useTouch();
+    const vertical = computed(() => {
+      const { rootWidth, rootHeight } = props;
+      const rootRatio = rootHeight / rootWidth;
+      return state.imageRatio > rootRatio;
+    });
+    const imageStyle = computed(() => {
+      const { scale, moveX, moveY, moving, zooming } = state;
+      const style = {
+        transitionDuration: zooming || moving ? "0s" : ".3s"
+      };
+      if (scale !== 1) {
+        const offsetX = moveX / scale;
+        const offsetY = moveY / scale;
+        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+      }
+      return style;
+    });
+    const maxMoveX = computed(() => {
+      if (state.imageRatio) {
+        const { rootWidth, rootHeight } = props;
+        const displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
+        return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
+      }
+      return 0;
+    });
+    const maxMoveY = computed(() => {
+      if (state.imageRatio) {
+        const { rootWidth, rootHeight } = props;
+        const displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
+        return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
+      }
+      return 0;
+    });
+    const imageLoad = (event) => {
+      const { naturalWidth, naturalHeight } = event.target;
+      state.imageRatio = naturalHeight / naturalWidth;
+    };
+    const resetScale = () => {
+      setScale(1);
+      state.moveX = 0;
+      state.moveY = 0;
+    };
+    const setScale = (scale) => {
+      scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
+      if (scale !== state.scale) {
+        state.scale = scale;
+        emit("scale", {
+          scale,
+          index: props.initNo
+        });
+      }
+    };
+    const toggleScale = () => {
+      const scale = state.scale > 1 ? 1 : 2;
+      setScale(scale);
+      state.moveX = 0;
+      state.moveY = 0;
+    };
+    const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+    let startMoveX;
+    let startMoveY;
+    let startScale;
+    let startDistance;
+    let doubleTapTimer;
+    let touchStartTime;
+    let fingerNum;
+    const onTouchStart = (event) => {
+      const { touches } = event;
+      const { offsetX } = touch;
+      touch.start(event);
+      fingerNum = touches.length;
+      startMoveX = state.moveX;
+      startMoveY = state.moveY;
+      touchStartTime = Date.now();
+      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.zooming = fingerNum === 2 && !offsetX.value;
+      if (state.zooming) {
+        startScale = state.scale;
+        startDistance = getDistance(event.touches);
+      }
+    };
+    const onTouchMove = (event) => {
+      const { touches } = event;
+      touch.move(event);
+      if (state.moving || state.zooming) {
+        preventDefault(event, true);
+      }
+      if (state.moving) {
+        const { deltaX, deltaY } = touch;
+        const moveX = deltaX.value + startMoveX;
+        const moveY = deltaY.value + startMoveY;
+        state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+        state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+      }
+      if (state.zooming && touches.length === 2) {
+        const distance = getDistance(touches);
+        const scale = startScale * distance / startDistance;
+        setScale(scale);
+      }
+    };
+    const checkTap = () => {
+      if (fingerNum > 1) {
+        return;
+      }
+      const { offsetX, offsetY } = touch;
+      const deltaTime = Date.now() - touchStartTime;
+      const TAP_TIME = 250;
+      const TAP_OFFSET = 5;
+      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
+        if (doubleTapTimer) {
+          clearTimeout(doubleTapTimer);
+          doubleTapTimer = null;
+          toggleScale();
+        } else {
+          doubleTapTimer = setTimeout(() => {
+            emit("close");
+            doubleTapTimer = null;
+          }, TAP_TIME);
+        }
+      }
+    };
+    const onTouchEnd = (event) => {
+      let stopPropagation = false;
+      if (state.moving || state.zooming) {
+        stopPropagation = true;
+        if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) {
+          stopPropagation = false;
+        }
+        if (!event.touches.length) {
+          if (state.zooming) {
+            state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
+            state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
+            state.zooming = false;
+          }
+          state.moving = false;
+          startMoveX = 0;
+          startMoveY = 0;
+          startScale = 1;
+          if (state.scale < 1) {
+            resetScale();
+          }
+          if (state.scale > props.maxZoom) {
+            state.scale = +props.maxZoom;
+          }
+        }
+      }
+      preventDefault(event, stopPropagation);
+      checkTap();
+      touch.reset();
+    };
+    const preventDefault = (event, isStopPropagation) => {
+      if (typeof event.cancelable !== "boolean" || event.cancelable) {
+        event.preventDefault();
+      }
+      if (isStopPropagation) {
+        event.stopPropagation();
+      }
+    };
+    const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+    watch(() => props.initNo, resetScale);
+    watch(() => props.show, (value) => {
+      if (!value) {
+        resetScale();
+      }
+    });
+    return {
+      ...toRefs(state),
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      getDistance,
+      imageStyle,
+      imageLoad
+    };
+  }
+});
+const _hoisted_1$1 = ["src"];
+const _hoisted_2$1 = {
+  key: 1,
+  class: "nut-imagepreview-box"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_video = resolveComponent("nut-video");
+  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
+  return openBlock(), createBlock(_component_nut_swiper_item, {
+    onTouchstart: _ctx.onTouchStart,
+    onTouchmove: _ctx.onTouchMove,
+    onTouchend: _ctx.onTouchEnd,
+    onTouchcancel: _ctx.onTouchEnd
+  }, {
+    default: withCtx(() => [
+      _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        style: normalizeStyle(_ctx.imageStyle),
+        class: "nut-imagepreview-box"
+      }, [
+        createElementVNode("img", {
+          src: _ctx.image.src,
+          class: "nut-imagepreview-img",
+          onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.imageLoad && _ctx.imageLoad(...args))
+        }, null, 40, _hoisted_1$1)
+      ], 4)) : createCommentVNode("", true),
+      _ctx.video ? (openBlock(), createElementBlock("view", _hoisted_2$1, [
+        createVNode(_component_nut_video, {
+          source: _ctx.video.source,
+          options: _ctx.video.options
+        }, null, 8, ["source", "options"])
+      ])) : createCommentVNode("", true)
+    ]),
+    _: 1
+  }, 8, ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"]);
+}
+var ImagePreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const { componentName, create } = createComponent("imagepreview");
+const _sfc_main = create({
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    images: {
+      type: Array,
+      default: () => []
+    },
+    videos: {
+      type: Array,
+      default: () => []
+    },
+    contentClose: {
+      type: Boolean,
+      default: true
+    },
+    initNo: {
+      type: Number,
+      default: 1
+    },
+    paginationVisible: {
+      type: Boolean,
+      default: false
+    },
+    paginationColor: {
+      type: String,
+      default: "#fff"
+    },
+    autoplay: {
+      type: [Number, String],
+      default: 0
+    },
+    isWrapTeleport: {
+      type: Boolean,
+      default: false
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    },
+    closeable: {
+      type: Boolean,
+      default: false
+    },
+    closeIcon: {
+      type: String,
+      default: "circle-close"
+    },
+    closeIconPosition: {
+      type: String,
+      default: "top-right"
+    },
+    beforeClose: Function,
+    minZoom: {
+      type: Number,
+      default: 1 / 3
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
     }
-    var o2 = e2.touches, t2 = o2[0], i2 = o2[1];
-    const n2 = l2.store;
-    n2.moveable = true, i2 && (n2.oriDistance = u2({ x: t2.pageX, y: t2.pageY }, { x: i2.pageX, y: i2.pageY })), n2.originScale = n2.scale || 1;
-  }, onTouchMove: g2, onTouchEnd: d2, getDistance: u2, scaleNow: m2, styles: c2 };
-} }), B = ["src"], D = { key: 0, class: "nut-imagepreview-index" };
-var O = N(P, [["render", function(e2, o2, t2, i2, n2, y2) {
-  const w2 = s("nut-video"), b2 = s("nut-swiper-item"), C2 = s("nut-swiper"), x2 = s("nut-icon"), T2 = s("nut-popup");
-  return a(), l(T2, { "pop-class": "custom-pop", visible: e2.showPop, "onUpdate:visible": o2[3] || (o2[3] = (o3) => e2.showPop = o3), isWrapTeleport: e2.isWrapTeleport, onClick: e2.onClose, style: { width: "100%" } }, { default: c(() => [r("view", { class: "nut-imagepreview", onClick: o2[0] || (o2[0] = p((...o3) => e2.closeOnImg && e2.closeOnImg(...o3), ["stop"])), onTouchstartCapture: o2[1] || (o2[1] = (...o3) => e2.onTouchStart && e2.onTouchStart(...o3)) }, [e2.showPop ? (a(), l(C2, { key: 0, "auto-play": e2.autoplay, class: "nut-imagepreview-swiper", loop: true, "is-preventDefault": false, direction: "horizontal", onChange: e2.slideChangeEnd, "init-page": e2.initNo > e2.maxNo ? e2.maxNo - 1 : e2.initNo - 1, "pagination-visible": e2.paginationVisible, "pagination-color": e2.paginationColor }, { default: c(() => [(a(true), u(m, null, g(e2.videos, (e3, o3) => (a(), l(b2, { key: o3 }, { default: c(() => [d(w2, { source: e3.source, options: e3.options }, null, 8, ["source", "options"])]), _: 2 }, 1024))), 128)), (a(true), u(m, null, g(e2.images, (e3, o3) => (a(), l(b2, { key: o3 }, { default: c(() => [r("img", { src: e3.src, class: "nut-imagepreview-img" }, null, 8, B)]), _: 2 }, 1024))), 128))]), _: 1 }, 8, ["auto-play", "onChange", "init-page", "pagination-visible", "pagination-color"])) : h("", true)], 32), e2.showIndex ? (a(), u("view", D, f(e2.active) + " / " + f(e2.images.length + e2.videos.length), 1)) : h("", true), e2.closeable ? (a(), u("view", { key: 1, class: "nut-imagepreview-close-icon", onClick: o2[2] || (o2[2] = (...o3) => e2.handleCloseIcon && e2.handleCloseIcon(...o3)), style: v(e2.styles) }, [d(x2, { name: e2.closeIcon, color: "#ffffff" }, null, 8, ["name"])], 4)) : h("", true)]), _: 1 }, 8, ["visible", "isWrapTeleport", "onClick"]);
-}]]);
-class V {
+  },
+  emits: ["close", "change"],
+  components: {
+    [Popup.name]: Popup,
+    [Video.name]: Video,
+    [Swiper.name]: Swiper,
+    [SwiperItem.name]: SwiperItem,
+    [_sfc_main$2.name]: _sfc_main$2,
+    ImagePreviewItem
+  },
+  setup(props, { emit }) {
+    toRefs(props);
+    const swipeRef = ref();
+    const state = reactive({
+      showPop: false,
+      active: 1,
+      maxNo: 1,
+      rootWidth: 0,
+      rootHeight: 0
+    });
+    const styles = computed(() => {
+      let style = {};
+      if (props.closeIconPosition == "top-right") {
+        style.right = "10px";
+      } else {
+        style.left = "10px";
+      }
+      return style;
+    });
+    const slideChangeEnd = function(page) {
+      state.active = page + 1;
+      emit("change", state.active);
+    };
+    const onClose = () => {
+      if (props.beforeClose) {
+        const returnVal = props.beforeClose.apply(null, state.active);
+        if (isPromise(returnVal)) {
+          returnVal.then((value) => {
+            if (value) {
+              closeDone();
+            }
+          });
+        } else if (returnVal) {
+          closeDone();
+        }
+      } else {
+        closeDone();
+      }
+    };
+    const closeDone = () => {
+      state.showPop = false;
+      state.active = 1;
+      emit("close");
+    };
+    const handleCloseIcon = () => {
+      onClose();
+    };
+    const init = () => {
+      setTimeout(() => {
+        state.rootHeight = swipeRef.value.offsetHeight;
+        state.rootWidth = swipeRef.value.offsetWidth;
+      }, 100);
+    };
+    watch(() => props.show, (val) => {
+      state.showPop = val;
+      init();
+    });
+    onMounted(() => {
+      state.active = props.initNo;
+      state.showPop = props.show;
+      state.maxNo = props.images.length + props.videos.length;
+    });
+    return {
+      swipeRef,
+      ...toRefs(state),
+      slideChangeEnd,
+      onClose,
+      handleCloseIcon,
+      styles
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "nut-imagepreview",
+  ref: "swipeRef"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-imagepreview-index"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_image_preview_item = resolveComponent("image-preview-item");
+  const _component_nut_swiper = resolveComponent("nut-swiper");
+  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createBlock(_component_nut_popup, {
+    "pop-class": "custom-pop",
+    visible: _ctx.showPop,
+    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPop = $event),
+    isWrapTeleport: _ctx.isWrapTeleport,
+    onClick: _ctx.onClose,
+    style: { "width": "100%" }
+  }, {
+    default: withCtx(() => [
+      createElementVNode("view", _hoisted_1, [
+        _ctx.showPop ? (openBlock(), createBlock(_component_nut_swiper, {
+          key: 0,
+          "auto-play": _ctx.autoplay,
+          class: "nut-imagepreview-swiper",
+          loop: true,
+          "is-preventDefault": false,
+          direction: "horizontal",
+          onChange: _ctx.slideChangeEnd,
+          "init-page": _ctx.initNo > _ctx.maxNo ? _ctx.maxNo - 1 : _ctx.initNo - 1,
+          "pagination-visible": _ctx.paginationVisible,
+          "pagination-color": _ctx.paginationColor
+        }, {
+          default: withCtx(() => [
+            _ctx.videos.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.videos, (item, index) => {
+              return openBlock(), createBlock(_component_image_preview_item, {
+                key: index,
+                video: item,
+                rootHeight: _ctx.rootHeight,
+                rootWidth: _ctx.rootWidth,
+                show: _ctx.showPop,
+                "init-no": _ctx.active,
+                onClose: _ctx.onClose,
+                maxZoom: _ctx.maxZoom,
+                minZoom: _ctx.minZoom
+              }, null, 8, ["video", "rootHeight", "rootWidth", "show", "init-no", "onClose", "maxZoom", "minZoom"]);
+            }), 128)) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.images, (item, index) => {
+              return openBlock(), createBlock(_component_image_preview_item, {
+                key: index,
+                image: item,
+                rootHeight: _ctx.rootHeight,
+                rootWidth: _ctx.rootWidth,
+                show: _ctx.showPop,
+                "init-no": _ctx.active,
+                onClose: _ctx.onClose
+              }, null, 8, ["image", "rootHeight", "rootWidth", "show", "init-no", "onClose"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["auto-play", "onChange", "init-page", "pagination-visible", "pagination-color"])) : createCommentVNode("", true)
+      ], 512),
+      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active) + " / " + toDisplayString(_ctx.images.length + _ctx.videos.length), 1)) : createCommentVNode("", true),
+      _ctx.closeable ? (openBlock(), createElementBlock("view", {
+        key: 1,
+        class: "nut-imagepreview-close-icon",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCloseIcon && _ctx.handleCloseIcon(...args)),
+        style: normalizeStyle(_ctx.styles)
+      }, [
+        createVNode(_component_nut_icon, {
+          name: _ctx.closeIcon,
+          color: "#ffffff"
+        }, null, 8, ["name"])
+      ], 4)) : createCommentVNode("", true)
+    ]),
+    _: 1
+  }, 8, ["visible", "isWrapTeleport", "onClick"]);
+}
+var ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+class ImagePreviewOptions {
   constructor() {
-    this.show = false, this.images = [], this.initNo = 1, this.paginationVisible = false, this.paginationColor = "", this.teleport = "body", this.onClose = () => {
+    this.show = false;
+    this.images = [];
+    this.initNo = 1;
+    this.paginationVisible = false;
+    this.paginationColor = "";
+    this.teleport = "body";
+    this.onClose = () => {
     };
   }
 }
-class X {
-  constructor(e2) {
-    this.options = new V();
-    let o2 = Object.assign(this.options, e2), t2 = document.body, i2 = o2.teleport;
-    i2 != "body" && (t2 = typeof i2 == "string" ? document.querySelector(i2) : o2.teleport);
-    const n2 = document.createElement("view");
-    n2.id = "imagepreview-" + new Date().getTime();
-    const s2 = d({ setup: () => (o2.teleport = `#${n2.id}`, () => w(O, o2)) });
-    t2.appendChild(n2), y(s2, n2);
+class ImagePreviewFunction {
+  constructor(_options) {
+    this.options = new ImagePreviewOptions();
+    let options = Object.assign(this.options, _options);
+    let elWarp = document.body;
+    let teleport = options.teleport;
+    if (teleport != "body") {
+      if (typeof teleport == "string") {
+        elWarp = document.querySelector(teleport);
+      } else {
+        elWarp = options.teleport;
+      }
+    }
+    const root = document.createElement("view");
+    root.id = "imagepreview-" + new Date().getTime();
+    const Wrapper = {
+      setup() {
+        options.teleport = `#${root.id}`;
+        return () => {
+          return h(ImagePreview, options);
+        };
+      }
+    };
+    const instance = createVNode(Wrapper);
+    elWarp.appendChild(root);
+    render(instance, root);
   }
 }
-const Y = function(e2) {
-  return new X(e2);
+const _ImagePreview = function(options) {
+  return new ImagePreviewFunction(options);
 };
-Y.install = (e2) => {
-  e2.use(O), e2.config.globalProperties.$imagepreview = Y;
+_ImagePreview.install = (app) => {
+  app.use(ImagePreview);
+  app.config.globalProperties.$imagepreview = _ImagePreview;
 };
-export { O as ImagePreview, V as ImagePreviewOptions, Y as default };
+export { ImagePreview, ImagePreviewOptions, _ImagePreview as default };