vant 4.0.3 → 4.0.5

package/lib/image-preview/ImagePreview.js

@@ -1,192 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name2 in all)
-    __defProp(target, name2, { get: all[name2], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var stdin_exports = {};
-__export(stdin_exports, {
-  default: () => stdin_default,
-  imagePreviewProps: () => imagePreviewProps
-});
-module.exports = __toCommonJS(stdin_exports);
-var import_vue = require("vue");
-var import_vue2 = require("vue");
-var import_utils = require("../utils");
-var import_use = require("@vant/use");
-var import_use_expose = require("../composables/use-expose");
-var import_icon = require("../icon");
-var import_swipe = require("../swipe");
-var import_popup = require("../popup");
-var import_ImagePreviewItem = __toESM(require("./ImagePreviewItem"));
-const [name, bem] = (0, import_utils.createNamespace)("image-preview");
-const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate"];
-const imagePreviewProps = {
-  show: Boolean,
-  loop: import_utils.truthProp,
-  images: (0, import_utils.makeArrayProp)(),
-  minZoom: (0, import_utils.makeNumericProp)(1 / 3),
-  maxZoom: (0, import_utils.makeNumericProp)(3),
-  overlay: import_utils.truthProp,
-  closeable: Boolean,
-  showIndex: import_utils.truthProp,
-  className: import_utils.unknownProp,
-  closeIcon: (0, import_utils.makeStringProp)("clear"),
-  transition: String,
-  beforeClose: Function,
-  overlayClass: import_utils.unknownProp,
-  overlayStyle: Object,
-  swipeDuration: (0, import_utils.makeNumericProp)(300),
-  startPosition: (0, import_utils.makeNumericProp)(0),
-  showIndicators: Boolean,
-  closeOnPopstate: import_utils.truthProp,
-  closeIconPosition: (0, import_utils.makeStringProp)("top-right")
-};
-var stdin_default = (0, import_vue2.defineComponent)({
-  name,
-  props: imagePreviewProps,
-  emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const swipeRef = (0, import_vue2.ref)();
-    const state = (0, import_vue2.reactive)({
-      active: 0,
-      rootWidth: 0,
-      rootHeight: 0
-    });
-    const resize = () => {
-      if (swipeRef.value) {
-        const rect = (0, import_use.useRect)(swipeRef.value.$el);
-        state.rootWidth = rect.width;
-        state.rootHeight = rect.height;
-        swipeRef.value.resize();
-      }
-    };
-    const emitScale = (args) => emit("scale", args);
-    const updateShow = (show) => emit("update:show", show);
-    const emitClose = () => {
-      (0, import_utils.callInterceptor)(props.beforeClose, {
-        args: [state.active],
-        done: () => updateShow(false)
-      });
-    };
-    const setActive = (active) => {
-      if (active !== state.active) {
-        state.active = active;
-        emit("change", active);
-      }
-    };
-    const renderIndex = () => {
-      if (props.showIndex) {
-        return (0, import_vue.createVNode)("div", {
-          "class": bem("index")
-        }, [slots.index ? slots.index({
-          index: state.active
-        }) : `${state.active + 1} / ${props.images.length}`]);
-      }
-    };
-    const renderCover = () => {
-      if (slots.cover) {
-        return (0, import_vue.createVNode)("div", {
-          "class": bem("cover")
-        }, [slots.cover()]);
-      }
-    };
-    const renderImages = () => (0, import_vue.createVNode)(import_swipe.Swipe, {
-      "ref": swipeRef,
-      "lazyRender": true,
-      "loop": props.loop,
-      "class": bem("swipe"),
-      "duration": props.swipeDuration,
-      "initialSwipe": props.startPosition,
-      "showIndicators": props.showIndicators,
-      "indicatorColor": "white",
-      "onChange": setActive
-    }, {
-      default: () => [props.images.map((image, index) => (0, import_vue.createVNode)(import_ImagePreviewItem.default, {
-        "src": image,
-        "show": props.show,
-        "active": state.active,
-        "maxZoom": props.maxZoom,
-        "minZoom": props.minZoom,
-        "rootWidth": state.rootWidth,
-        "rootHeight": state.rootHeight,
-        "onScale": emitScale,
-        "onClose": emitClose,
-        "onLongPress": () => emit("longPress", {
-          index
-        })
-      }, {
-        image: slots.image
-      }))]
-    });
-    const renderClose = () => {
-      if (props.closeable) {
-        return (0, import_vue.createVNode)(import_icon.Icon, {
-          "role": "button",
-          "name": props.closeIcon,
-          "class": [bem("close-icon", props.closeIconPosition), import_utils.HAPTICS_FEEDBACK],
-          "onClick": emitClose
-        }, null);
-      }
-    };
-    const onClosed = () => emit("closed");
-    const swipeTo = (index, options) => {
-      var _a;
-      return (_a = swipeRef.value) == null ? void 0 : _a.swipeTo(index, options);
-    };
-    (0, import_use_expose.useExpose)({
-      swipeTo
-    });
-    (0, import_vue2.onMounted)(resize);
-    (0, import_vue2.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
-    (0, import_vue2.watch)(() => props.startPosition, (value) => setActive(+value));
-    (0, import_vue2.watch)(() => props.show, (value) => {
-      const {
-        images,
-        startPosition
-      } = props;
-      if (value) {
-        setActive(+startPosition);
-        (0, import_vue2.nextTick)(() => {
-          resize();
-          swipeTo(+startPosition, {
-            immediate: true
-          });
-        });
-      } else {
-        emit("close", {
-          index: state.active,
-          url: images[state.active]
-        });
-      }
-    });
-    return () => (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
-      "class": [bem(), props.className],
-      "overlayClass": [bem("overlay"), props.overlayClass],
-      "onClosed": onClosed,
-      "onUpdate:show": updateShow
-    }, (0, import_utils.pick)(props, popupProps)), {
-      default: () => [renderClose(), renderImages(), renderIndex(), renderCover()]
-    });
-  }
-});

package/lib/image-preview/ImagePreviewItem.d.ts

@@ -1,48 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    src: StringConstructor;
-    show: BooleanConstructor;
-    active: NumberConstructor;
-    minZoom: {
-        type: (NumberConstructor | StringConstructor)[];
-        required: true;
-    };
-    maxZoom: {
-        type: (NumberConstructor | StringConstructor)[];
-        required: true;
-    };
-    rootWidth: {
-        type: NumberConstructor;
-        required: true;
-    };
-    rootHeight: {
-        type: NumberConstructor;
-        required: true;
-    };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "scale" | "longPress")[], "close" | "scale" | "longPress", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: BooleanConstructor;
-    active: NumberConstructor;
-    minZoom: {
-        type: (NumberConstructor | StringConstructor)[];
-        required: true;
-    };
-    maxZoom: {
-        type: (NumberConstructor | StringConstructor)[];
-        required: true;
-    };
-    rootWidth: {
-        type: NumberConstructor;
-        required: true;
-    };
-    rootHeight: {
-        type: NumberConstructor;
-        required: true;
-    };
-}>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onScale?: ((...args: any[]) => any) | undefined;
-    onLongPress?: ((...args: any[]) => any) | undefined;
-}, {
-    show: boolean;
-}>;
-export default _default;

package/lib/image-preview/ImagePreviewItem.js

@@ -1,284 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var stdin_exports = {};
-__export(stdin_exports, {
-  default: () => stdin_default
-});
-module.exports = __toCommonJS(stdin_exports);
-var import_vue = require("vue");
-var import_vue2 = require("vue");
-var import_utils = require("../utils");
-var import_use_touch = require("../composables/use-touch");
-var import_use = require("@vant/use");
-var import_image = require("../image");
-var import_loading = require("../loading");
-var import_swipe_item = require("../swipe-item");
-const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
-const bem = (0, import_utils.createNamespace)("image-preview")[1];
-var stdin_default = (0, import_vue2.defineComponent)({
-  props: {
-    src: String,
-    show: Boolean,
-    active: Number,
-    minZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
-    maxZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
-    rootWidth: (0, import_utils.makeRequiredProp)(Number),
-    rootHeight: (0, import_utils.makeRequiredProp)(Number)
-  },
-  emits: ["scale", "close", "longPress"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const state = (0, import_vue2.reactive)({
-      scale: 1,
-      moveX: 0,
-      moveY: 0,
-      moving: false,
-      zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
-    });
-    const touch = (0, import_use_touch.useTouch)();
-    const swipeItem = (0, import_vue2.ref)();
-    const vertical = (0, import_vue2.computed)(() => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
-    const imageStyle = (0, import_vue2.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 = (0, import_vue2.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 = (0, import_vue2.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 setScale = (scale) => {
-      scale = (0, import_utils.clamp)(scale, +props.minZoom, +props.maxZoom + 1);
-      if (scale !== state.scale) {
-        state.scale = scale;
-        emit("scale", {
-          scale,
-          index: props.active
-        });
-      }
-    };
-    const resetScale = () => {
-      setScale(1);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    const toggleScale = () => {
-      const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    let fingerNum;
-    let startMoveX;
-    let startMoveY;
-    let startScale;
-    let startDistance;
-    let doubleTapTimer;
-    let touchStartTime;
-    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) {
-        (0, import_utils.preventDefault)(event, true);
-      }
-      if (state.moving) {
-        const {
-          deltaX,
-          deltaY
-        } = touch;
-        const moveX = deltaX.value + startMoveX;
-        const moveY = deltaY.value + startMoveY;
-        state.moveX = (0, import_utils.clamp)(moveX, -maxMoveX.value, maxMoveX.value);
-        state.moveY = (0, import_utils.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) {
-        if (deltaTime < TAP_TIME) {
-          if (doubleTapTimer) {
-            clearTimeout(doubleTapTimer);
-            doubleTapTimer = null;
-            toggleScale();
-          } else {
-            doubleTapTimer = setTimeout(() => {
-              emit("close");
-              doubleTapTimer = null;
-            }, TAP_TIME);
-          }
-        } else if (deltaTime > import_utils.LONG_PRESS_START_TIME) {
-          emit("longPress");
-        }
-      }
-    };
-    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 = (0, import_utils.clamp)(state.moveX, -maxMoveX.value, maxMoveX.value);
-            state.moveY = (0, import_utils.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;
-          }
-        }
-      }
-      (0, import_utils.preventDefault)(event, stopPropagation);
-      checkTap();
-      touch.reset();
-    };
-    const onLoad = (event) => {
-      const {
-        naturalWidth,
-        naturalHeight
-      } = event.target;
-      state.imageRatio = naturalHeight / naturalWidth;
-    };
-    (0, import_vue2.watch)(() => props.active, resetScale);
-    (0, import_vue2.watch)(() => props.show, (value) => {
-      if (!value) {
-        resetScale();
-      }
-    });
-    (0, import_use.useEventListener)("touchmove", onTouchMove, {
-      target: (0, import_vue2.computed)(() => {
-        var _a;
-        return (_a = swipeItem.value) == null ? void 0 : _a.$el;
-      })
-    });
-    return () => {
-      const imageSlots = {
-        loading: () => (0, import_vue.createVNode)(import_loading.Loading, {
-          "type": "spinner"
-        }, null)
-      };
-      return (0, import_vue.createVNode)(import_swipe_item.SwipeItem, {
-        "ref": swipeItem,
-        "class": bem("swipe-item"),
-        "onTouchstartPassive": onTouchStart,
-        "onTouchend": onTouchEnd,
-        "onTouchcancel": onTouchEnd
-      }, {
-        default: () => [slots.image ? (0, import_vue.createVNode)("div", {
-          "class": bem("image-wrap")
-        }, [slots.image({
-          src: props.src
-        })]) : (0, import_vue.createVNode)(import_image.Image, {
-          "src": props.src,
-          "fit": "contain",
-          "class": bem("image", {
-            vertical: vertical.value
-          }),
-          "style": imageStyle.value,
-          "onLoad": onLoad
-        }, imageSlots)]
-      });
-    };
-  }
-});

package/lib/image-preview/function-call.d.ts

@@ -1,3 +0,0 @@
-import { ComponentInstance } from '../utils';
-import type { ImagePreviewOptions } from './types';
-export declare const showImagePreview: (options: string[] | ImagePreviewOptions, startPosition?: number) => ComponentInstance | undefined;

package/lib/image-preview/function-call.js

@@ -1,89 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var stdin_exports = {};
-__export(stdin_exports, {
-  showImagePreview: () => showImagePreview
-});
-module.exports = __toCommonJS(stdin_exports);
-var import_vue = require("vue");
-var import_utils = require("../utils");
-var import_mount_component = require("../utils/mount-component");
-var import_ImagePreview = __toESM(require("./ImagePreview"));
-let instance;
-const defaultConfig = {
-  loop: true,
-  images: [],
-  maxZoom: 3,
-  minZoom: 1 / 3,
-  onScale: void 0,
-  onClose: void 0,
-  onChange: void 0,
-  teleport: "body",
-  className: "",
-  showIndex: true,
-  closeable: false,
-  closeIcon: "clear",
-  transition: void 0,
-  beforeClose: void 0,
-  overlayStyle: void 0,
-  overlayClass: void 0,
-  startPosition: 0,
-  swipeDuration: 300,
-  showIndicators: false,
-  closeOnPopstate: true,
-  closeIconPosition: "top-right"
-};
-function initInstance() {
-  ({
-    instance
-  } = (0, import_mount_component.mountComponent)({
-    setup() {
-      const {
-        state,
-        toggle
-      } = (0, import_mount_component.usePopupState)();
-      const onClosed = () => {
-        state.images = [];
-      };
-      return () => (0, import_vue.createVNode)(import_ImagePreview.default, (0, import_vue.mergeProps)(state, {
-        "onClosed": onClosed,
-        "onUpdate:show": toggle
-      }), null);
-    }
-  }));
-}
-const showImagePreview = (options, startPosition = 0) => {
-  if (!import_utils.inBrowser) {
-    return;
-  }
-  if (!instance) {
-    initInstance();
-  }
-  options = Array.isArray(options) ? {
-    images: options,
-    startPosition
-  } : options;
-  instance.open((0, import_utils.extend)({}, defaultConfig, options));
-  return instance;
-};

package/lib/image-preview/index.css

@@ -1 +0,0 @@
-:root{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image,.van-image-preview__image-wrap{width:100%;transition-property:transform}.van-image-preview__image--vertical,.van-image-preview__image-wrap--vertical{width:auto;height:100%}.van-image-preview__image img,.van-image-preview__image-wrap img,.van-image-preview__image video,.van-image-preview__image-wrap video{-webkit-user-drag:none}.van-image-preview__image .van-image__error,.van-image-preview__image-wrap .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon,.van-image-preview__image-wrap .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading,.van-image-preview__image-wrap .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}