@nutui/nutui 4.3.14 → 4.3.15-beta.2

package/dist/packages/imagepreview/ImagePreview.js

@@ -4,7 +4,6 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -18,293 +17,50 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, ref, nextTick, onMounted, Fragment, renderList, toDisplayString, normalizeClass, renderSlot, createVNode, h } from "vue";
+import { reactive, computed, watch, onMounted, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, withModifiers, createCommentVNode, createTextVNode, toDisplayString, normalizeStyle, createVNode } from "vue";
+import Taro from "@tarojs/taro";
+import { CircleClose } from "@nutui/icons-vue-taro";
 import { c as createComponent } from "../component-DQf3CENX.js";
-import { e as clamp, d as preventDefault, a as isArray } from "../util-D1pvnUYu.js";
-import { u as useRect } from "../index-B1qsj2XR.js";
-import { u as useTouch } from "../index-I8tfW3Kf.js";
-import NutVideo from "../video/Video.js";
+import { f as funInterceptor } from "../Interceptor-aNUpilAP.js";
+import { N as NutPopup } from "../index.taro-CNxLoYer.js";
+import NutSwiper from "../swiper/Swiper.js";
 import NutSwiperItem from "../swiperitem/SwiperItem.js";
 import { _ as _export_sfc } from "../_plugin-vue_export-helper-1tPrXgE0.js";
-import { CircleClose } from "@nutui/icons-vue";
-import { N as NutPopup } from "../index-wLaOjIn1.js";
-import NutSwiper from "../swiper/Swiper.js";
-import { f as funInterceptor } from "../Interceptor-CBzqGJrl.js";
-import { C as CreateComponent } from "../mountComponent-CLi4Nz91.js";
-import { Overlay as _sfc_main$2 } from "../overlay/Overlay.js";
-const baseProps = {
-  show: { type: Boolean, default: false },
-  initNo: { type: Number, default: 0 },
-  showIndex: { type: Boolean, default: true },
-  minZoom: { type: Number, default: 1 / 3 },
-  maxZoom: { type: Number, default: 3 }
-};
-const { create: create$1 } = createComponent("image-preview-item");
-const _sfc_main$1 = create$1({
-  props: __spreadProps(__spreadValues({}, baseProps), {
-    image: {
-      type: Object,
-      default: () => ({})
+const { create } = createComponent("image-preview");
+const _sfc_main = create({
+  props: {
+    show: {
+      type: Boolean,
+      default: false
     },
-    video: {
-      type: Object,
-      default: () => ({})
+    images: {
+      type: Array,
+      default: () => []
     },
-    rootWidth: {
-      type: Number,
-      default: 0
+    contentClose: {
+      type: Boolean,
+      default: true
     },
-    rootHeight: {
+    initNo: {
       type: Number,
       default: 0
     },
-    contentClose: {
+    paginationVisible: {
+      type: Boolean,
+      default: false
+    },
+    paginationColor: {
+      type: String,
+      default: "#fff"
+    },
+    autoplay: {
+      type: [Number, String],
+      default: 3e3
+    },
+    showIndex: {
       type: Boolean,
       default: true
-    }
-  }),
-  emits: ["close", "scale"],
-  components: {
-    NutVideo,
-    NutSwiperItem
-  },
-  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 images = props.image;
-      if (images && images.src) {
-        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;
-      }
-      return {};
-    });
-    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(__pow(touches[0].clientX - touches[1].clientX, 2) + __pow(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 && props.video && props.video.source) {
-        return;
-      }
-      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(() => {
-            if (props.contentClose) {
-              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 closeSwiper = () => {
-      emit("close");
-    };
-    watch(() => props.initNo, resetScale);
-    watch(
-      () => props.show,
-      (value) => {
-        if (!value) {
-          resetScale();
-        }
-      }
-    );
-    return __spreadProps(__spreadValues({}, toRefs(state)), {
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      getDistance,
-      imageStyle,
-      imageLoad,
-      closeSwiper
-    });
-  }
-});
-const _hoisted_1$1 = ["src"];
-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, { onClick: _ctx.closeSwiper }, {
-    default: withCtx(() => [
-      createElementVNode("view", {
-        style: normalizeStyle(_ctx.imageStyle),
-        class: "nut-image-preview-box",
-        onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
-        onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
-        onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
-        onTouchcancel: _cache[4] || (_cache[4] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
-      }, [
-        _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("img", {
-          key: 0,
-          src: _ctx.image.src,
-          class: "nut-image-preview-img",
-          onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.imageLoad && _ctx.imageLoad(...args))
-        }, null, 40, _hoisted_1$1)) : createCommentVNode("", true),
-        _ctx.video && _ctx.video.source ? (openBlock(), createBlock(_component_nut_video, {
-          key: 1,
-          source: _ctx.video.source,
-          options: _ctx.video.options
-        }, null, 8, ["source", "options"])) : createCommentVNode("", true)
-      ], 36)
-    ]),
-    _: 1
-  }, 8, ["onClick"]);
-}
-const ImagePreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const { create } = createComponent("image-preview");
-const _sfc_main = create({
-  props: __spreadProps(__spreadValues({}, baseProps), {
-    images: { type: Array, default: () => [] },
-    videos: { type: Array, default: () => [] },
-    contentClose: { type: Boolean, default: true },
-    paginationVisible: { type: Boolean, default: false },
-    paginationColor: { type: String, default: "#fff" },
-    autoplay: { type: [Number, String], default: 0 },
-    teleport: { type: [String, Element], default: "body" },
-    teleportDisable: { ype: Boolean, default: false },
+    },
     closeable: {
       type: Boolean,
       default: false
@@ -319,32 +75,42 @@ const _sfc_main = create({
       type: Boolean,
       default: true
     }
-  }),
-  emits: ["close", "change"],
+  },
+  emits: ["close", "change", "longPress"],
   components: {
-    ImagePreviewItem,
-    CircleClose,
     NutPopup,
-    NutSwiper
+    NutSwiper,
+    NutSwiperItem,
+    CircleClose
   },
   setup(props, { emit }) {
-    const swipeRef = ref();
     const state = reactive({
-      showPop: props.show,
+      showPop: false,
       active: 0,
-      rootWidth: 0,
-      rootHeight: 0
+      options: {
+        muted: true,
+        controls: true
+      },
+      eleImg: null,
+      store: {
+        scale: 1,
+        moveable: false,
+        originScale: 1,
+        oriDistance: 1
+      },
+      lastTouchEndTime: 0,
+      // 用来辅助监听双击
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
     });
-    const iconClasses = computed(() => {
-      const pre = "nut-image-preview-close";
-      const iconn = props.closeIconPosition == "top-right" ? `${pre}-right` : `${pre}-left`;
-      return `nut-image-preview-close-icon ${iconn}`;
-    });
-    const mergeImages = computed(() => {
-      if (isArray(props.videos)) {
-        return [].concat(props.videos).concat(props.images);
+    const styles = computed(() => {
+      let style = {};
+      if (props.closeIconPosition == "top-right") {
+        style.right = "10px";
+      } else {
+        style.left = "10px";
       }
-      return props.images;
+      return style;
     });
     const setActive = (active) => {
       if (active !== state.active) {
@@ -352,6 +118,11 @@ const _sfc_main = create({
         emit("change", state.active);
       }
     };
+    const closeOnImg = () => {
+      if (props.contentClose) {
+        onClose();
+      }
+    };
     const onClose = () => {
       funInterceptor(props.beforeClose, {
         args: [state.active],
@@ -360,24 +131,97 @@ const _sfc_main = create({
     };
     const closeDone = () => {
       state.showPop = false;
+      state.store.scale = 1;
+      scaleNow();
       emit("close");
     };
-    const init = () => {
-      if (swipeRef.value) {
-        const rect = useRect(swipeRef.value);
-        state.rootHeight = rect.height;
-        state.rootWidth = rect.width;
+    const getDistance = (first, second) => {
+      return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+    };
+    const scaleNow = () => {
+      if (state.eleImg != null) {
+        state.eleImg.style.transform = "scale(" + state.store.scale + ")";
+      }
+    };
+    const onTouchStart = (event) => {
+      const curTouchTime = (/* @__PURE__ */ new Date()).getTime();
+      const touches = event.touches;
+      const events = touches[0];
+      const events2 = touches[1];
+      const store = state.store;
+      if (curTouchTime - state.lastTouchEndTime < 300) {
+        if (store.scale > 1) {
+          store.scale = 1;
+        } else if (store.scale == 1) {
+          store.scale = 2;
+        }
+        scaleNow();
+      }
+      store.moveable = true;
+      if (events2) {
+        store.oriDistance = getDistance(
+          {
+            x: events.pageX,
+            y: events.pageY
+          },
+          {
+            x: events2.pageX,
+            y: events2.pageY
+          }
+        );
+      }
+      store.originScale = store.scale || 1;
+    };
+    const onTouchMove = (event) => {
+      if (!state.store.moveable) {
+        return;
+      }
+      const store = state.store;
+      const touches = event.touches;
+      const events = touches[0];
+      const events2 = touches[1];
+      if (events2) {
+        const curDistance = getDistance(
+          {
+            x: events.pageX,
+            y: events.pageY
+          },
+          {
+            x: events2.pageX,
+            y: events2.pageY
+          }
+        );
+        const curScale = curDistance / store.oriDistance;
+        store.scale = store.originScale * curScale;
+        state.store.scale = Math.min(state.store.scale, 3);
+        scaleNow();
+      }
+    };
+    const onTouchEnd = () => {
+      state.lastTouchEndTime = (/* @__PURE__ */ new Date()).getTime();
+      const store = state.store;
+      store.moveable = false;
+      if (store.scale < 1.1 && store.scale > 1 || store.scale < 1) {
+        store.scale = 1;
+        scaleNow();
       }
     };
+    const longPress = (image) => {
+      emit("longPress", image);
+    };
+    const init = () => {
+      state.eleImg = document.querySelector(".nut-image-preview");
+      document.addEventListener("touchmove", onTouchMove);
+      document.addEventListener("touchend", onTouchEnd);
+      document.addEventListener("touchcancel", onTouchEnd);
+    };
     watch(
       () => props.show,
       (val) => {
         state.showPop = val;
         if (val) {
           setActive(props.initNo);
-          nextTick(() => {
-            init();
-          });
+          init();
         }
       }
     );
@@ -390,40 +234,40 @@ const _sfc_main = create({
     onMounted(() => {
       setActive(props.initNo);
     });
-    return __spreadProps(__spreadValues({
-      swipeRef
-    }, toRefs(state)), {
-      onClose,
-      mergeImages,
+    return __spreadProps(__spreadValues({}, toRefs(state)), {
       setActive,
-      iconClasses
+      onClose,
+      closeOnImg,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      getDistance,
+      scaleNow,
+      longPress,
+      styles
     });
   }
 });
-const _hoisted_1 = {
-  ref: "swipeRef",
-  class: "nut-image-preview"
-};
+const _hoisted_1 = ["src", "on:longPress", "on:longTap"];
 const _hoisted_2 = {
   key: 0,
   class: "nut-image-preview-index"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_image_preview_item = resolveComponent("image-preview-item");
+  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
   const _component_nut_swiper = resolveComponent("nut-swiper");
   const _component_CircleClose = resolveComponent("CircleClose");
   const _component_nut_popup = resolveComponent("nut-popup");
   return openBlock(), createBlock(_component_nut_popup, {
     visible: _ctx.showPop,
-    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPop = $event),
-    "pop-class": "nut-image-preview-custom-pop",
-    "teleport-disable": _ctx.teleportDisable,
-    teleport: _ctx.teleport,
-    "lock-scroll": "",
-    onClosed: _ctx.onClose
+    "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => _ctx.showPop = $event),
+    "pop-class": "nut-image-preview-custom-pop"
   }, {
     default: withCtx(() => [
-      createElementVNode("view", _hoisted_1, [
+      createElementVNode("view", {
+        class: "nut-image-preview",
+        onTouchstartCapture: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args))
+      }, [
         _ctx.showPop ? (openBlock(), createBlock(_component_nut_swiper, {
           key: 0,
           "auto-play": _ctx.autoplay,
@@ -437,93 +281,41 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onChange: _ctx.setActive
         }, {
           default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.mergeImages, (item, index) => {
-              return openBlock(), createBlock(_component_image_preview_item, {
-                key: index,
-                video: index < _ctx.videos.length ? item : {},
-                image: index >= _ctx.videos.length ? item : {},
-                "root-height": _ctx.rootHeight,
-                "root-width": _ctx.rootWidth,
-                show: _ctx.showPop,
-                "init-no": _ctx.active + 1,
-                "content-close": _ctx.contentClose,
-                "max-zoom": _ctx.maxZoom,
-                "min-zoom": _ctx.minZoom,
-                onClose: _ctx.onClose
-              }, null, 8, ["video", "image", "root-height", "root-width", "show", "init-no", "content-close", "max-zoom", "min-zoom", "onClose"]);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.images, (item, index) => {
+              return openBlock(), createBlock(_component_nut_swiper_item, { key: index }, {
+                default: withCtx(() => [
+                  createElementVNode("img", {
+                    src: item.src,
+                    mode: "aspectFit",
+                    class: "nut-image-preview-img",
+                    "on:longPress": ($event) => _ctx.longPress(item),
+                    "on:longTap": ($event) => _ctx.longPress(item),
+                    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.closeOnImg && _ctx.closeOnImg(...args), ["stop"]))
+                  }, null, 40, _hoisted_1)
+                ]),
+                _: 2
+              }, 1024);
             }), 128))
           ]),
           _: 1
         }, 8, ["auto-play", "loop", "init-page", "pagination-visible", "pagination-color", "onChange"])) : createCommentVNode("", true)
-      ], 512),
-      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active + 1) + " / " + toDisplayString(_ctx.mergeImages.length), 1)) : createCommentVNode("", true),
+      ], 32),
+      _cache[4] || (_cache[4] = createTextVNode()),
+      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active + 1) + " / " + toDisplayString(_ctx.images.length), 1)) : createCommentVNode("", true),
+      _cache[5] || (_cache[5] = createTextVNode()),
       _ctx.closeable ? (openBlock(), createElementBlock("view", {
         key: 1,
-        class: normalizeClass(_ctx.iconClasses),
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+        class: "nut-image-preview-close-icon",
+        style: normalizeStyle(_ctx.styles),
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClose && _ctx.onClose(...args))
       }, [
-        renderSlot(_ctx.$slots, "close-icon", {}, () => [
-          createVNode(_component_CircleClose, { color: "#ffffff" })
-        ])
-      ], 2)) : createCommentVNode("", true)
+        createVNode(_component_CircleClose, { color: "#ffffff" })
+      ], 4)) : createCommentVNode("", true)
     ]),
-    _: 3
-  }, 8, ["visible", "teleport-disable", "teleport", "onClosed"]);
-}
-const ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-class ImagePreviewOptions {
-  constructor() {
-    __publicField(this, "show", false);
-    __publicField(this, "images", []);
-    __publicField(this, "videos", []);
-    __publicField(this, "contentClose", true);
-    __publicField(this, "initNo", 0);
-    __publicField(this, "paginationVisible", false);
-    __publicField(this, "paginationColor", "");
-    __publicField(this, "autoplay", 0);
-    __publicField(this, "isWrapTeleport", false);
-    __publicField(this, "showIndex", true);
-    __publicField(this, "closeable", false);
-    __publicField(this, "closeIcon", "circle-close");
-    __publicField(this, "closeIconPosition", "top-right");
-    __publicField(this, "beforeClose");
-    __publicField(this, "maxZoom", 3);
-    __publicField(this, "minZoom", 1 / 3);
-    __publicField(this, "isLoop", true);
-    __publicField(this, "teleport", "body");
-  }
-}
-class ImagePreviewFunction {
-  constructor(_options) {
-    __publicField(this, "options", new ImagePreviewOptions());
-    const options = Object.assign(this.options, _options);
-    const { unmount } = CreateComponent(options, {
-      name: "image-preview",
-      components: [NutPopup, NutVideo, NutSwiper, NutSwiperItem, _sfc_main$2],
-      wrapper: () => {
-        return {
-          setup() {
-            return () => {
-              options.onClose = () => {
-                options.show = false;
-                nextTick(() => {
-                  unmount();
-                });
-              };
-              return h(ImagePreview, options);
-            };
-          }
-        };
-      }
-    });
-  }
+    _: 1
+  }, 8, ["visible"]);
 }
-const showImagePreview = (options) => new ImagePreviewFunction(options);
-showImagePreview.install = (app) => {
-  app.use(ImagePreview);
-};
+const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  ImagePreviewOptions,
-  ImagePreview as default,
-  showImagePreview
+  index_taro as default
 };