vant 4.7.0 → 4.7.2

package/lib/index.d.ts

@@ -105,4 +105,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.7.0";
+export const version: "4.7.2";

package/lib/index.js

@@ -224,7 +224,7 @@ __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./tree-select"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
 __reExport(stdin_exports, require("./watermark"), module.exports);
-const version = "4.7.0";
+const version = "4.7.2";
 function install(app) {
   const components = [
     import_action_bar.ActionBar,

package/lib/notify/function-call.d.ts

@@ -1,6 +1,18 @@
 import { type ComponentInstance } from '../utils';
 import type { NotifyMessage, NotifyOptions } from './types';
+/**
+ * Close the currently displayed Notify
+ */
 export declare const closeNotify: () => void;
+/**
+ * Display Notify at the top of the page
+ */
 export declare function showNotify(options: NotifyMessage | NotifyOptions): ComponentInstance | undefined;
+/**
+ * Modify the default configuration, affecting all `showNotify` calls
+ */
 export declare const setNotifyDefaultOptions: (options: NotifyOptions) => NotifyOptions;
+/**
+ * Reset the default configuration, affecting all `showNotify` calls
+ */
 export declare const resetNotifyDefaultOptions: () => void;

package/lib/popover/Popover.js

@@ -26,6 +26,7 @@ var import_vue2 = require("vue");
 var import_popperjs = require("@vant/popperjs");
 var import_utils = require("../utils");
 var import_use = require("@vant/use");
+var import_use_scope_id = require("../composables/use-scope-id");
 var import_use_sync_prop_ref = require("../composables/use-sync-prop-ref");
 var import_icon = require("../icon");
 var import_popup = require("../popup");
@@ -203,7 +204,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "transition": "van-popover-zoom",
         "lockScroll": false,
         "onUpdate:show": updateShow
-      }, attrs, (0, import_utils.pick)(props, popupProps)), {
+      }, attrs, (0, import_use_scope_id.useScopeId)(), (0, import_utils.pick)(props, popupProps)), {
         default: () => [props.showArrow && (0, import_vue.createVNode)("div", {
           "class": bem("arrow")
         }, null), (0, import_vue.createVNode)("div", {

package/lib/popup/Popup.js

@@ -31,6 +31,7 @@ var import_use_lock_scroll = require("../composables/use-lock-scroll");
 var import_use_lazy_render = require("../composables/use-lazy-render");
 var import_on_popup_reopen = require("../composables/on-popup-reopen");
 var import_use_global_z_index = require("../composables/use-global-z-index");
+var import_use_scope_id = require("../composables/use-scope-id");
 var import_icon = require("../icon");
 var import_overlay = require("../overlay");
 const popupProps = (0, import_utils.extend)({}, import_shared.popupSharedProps, {
@@ -97,16 +98,17 @@ var stdin_default = (0, import_vue2.defineComponent)({
     };
     const renderOverlay = () => {
       if (props.overlay) {
-        return (0, import_vue.createVNode)(import_overlay.Overlay, {
+        return (0, import_vue.createVNode)(import_overlay.Overlay, (0, import_vue.mergeProps)({
           "show": props.show,
           "class": props.overlayClass,
           "zIndex": zIndex.value,
           "duration": props.duration,
           "customStyle": props.overlayStyle,
           "role": props.closeOnClickOverlay ? "button" : void 0,
-          "tabindex": props.closeOnClickOverlay ? 0 : void 0,
+          "tabindex": props.closeOnClickOverlay ? 0 : void 0
+        }, (0, import_use_scope_id.useScopeId)(), {
           "onClick": onClickOverlay
-        }, {
+        }), {
           default: slots["overlay-content"]
         });
       }
@@ -158,7 +160,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[import_vue.vShow, props.show]]);
+      }, attrs, (0, import_use_scope_id.useScopeId)()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[import_vue.vShow, props.show]]);
     });
     const renderTransition = () => {
       const {

package/lib/signature/Signature.js

@@ -50,37 +50,37 @@ var stdin_default = (0, import_vue2.defineComponent)({
   }) {
     const canvasRef = (0, import_vue2.ref)();
     const wrapRef = (0, import_vue2.ref)();
-    const state = (0, import_vue2.reactive)({
-      width: 0,
-      height: 0,
-      ctx: null,
-      ratio: import_utils.inBrowser ? window.devicePixelRatio : 1
+    const ctx = (0, import_vue2.computed)(() => {
+      if (!canvasRef.value)
+        return null;
+      return canvasRef.value.getContext("2d");
     });
-    let canvasRect;
     const isRenderCanvas = import_utils.inBrowser ? hasCanvasSupport() : true;
+    let canvasWidth = 0;
+    let canvasHeight = 0;
+    let canvasRect;
     const touchStart = () => {
-      if (!state.ctx) {
+      if (!ctx.value) {
         return false;
       }
-      state.ctx.beginPath();
-      state.ctx.lineWidth = props.lineWidth * state.ratio;
-      state.ctx.strokeStyle = props.penColor;
+      ctx.value.beginPath();
+      ctx.value.lineWidth = props.lineWidth;
+      ctx.value.strokeStyle = props.penColor;
       canvasRect = (0, import_use.useRect)(canvasRef);
       emit("start");
     };
     const touchMove = (event) => {
-      var _a, _b;
-      if (!state.ctx) {
+      if (!ctx.value) {
         return false;
       }
       (0, import_utils.preventDefault)(event);
       const touch = event.touches[0];
-      const mouseX = (touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0)) * state.ratio;
-      const mouseY = (touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0)) * state.ratio;
-      state.ctx.lineCap = "round";
-      state.ctx.lineJoin = "round";
-      (_a = state.ctx) == null ? void 0 : _a.lineTo(mouseX, mouseY);
-      (_b = state.ctx) == null ? void 0 : _b.stroke();
+      const mouseX = touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0);
+      const mouseY = touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0);
+      ctx.value.lineCap = "round";
+      ctx.value.lineJoin = "round";
+      ctx.value.lineTo(mouseX, mouseY);
+      ctx.value.stroke();
       emit("signing", event);
     };
     const touchEnd = (event) => {
@@ -97,10 +97,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return canvas.toDataURL() === empty.toDataURL();
     };
-    const setCanvasBgColor = (ctx) => {
-      if (ctx && props.backgroundColor) {
-        ctx.fillStyle = props.backgroundColor;
-        ctx.fillRect(0, 0, state.width, state.height);
+    const setCanvasBgColor = (ctx2) => {
+      if (ctx2 && props.backgroundColor) {
+        ctx2.fillStyle = props.backgroundColor;
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
       }
     };
     const submit = () => {
@@ -120,22 +120,22 @@ var stdin_default = (0, import_vue2.defineComponent)({
       });
     };
     const clear = () => {
-      if (state.ctx) {
-        state.ctx.clearRect(0, 0, state.width, state.height);
-        state.ctx.closePath();
-        setCanvasBgColor(state.ctx);
+      if (ctx.value) {
+        ctx.value.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.value.closePath();
+        setCanvasBgColor(ctx.value);
       }
       emit("clear");
     };
     (0, import_vue2.onMounted)(() => {
       var _a, _b, _c;
-      if (isRenderCanvas) {
-        state.ctx = (_a = canvasRef.value) == null ? void 0 : _a.getContext("2d");
-        state.width = (((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0) * state.ratio;
-        state.height = (((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0) * state.ratio;
-        (0, import_vue2.nextTick)(() => {
-          setCanvasBgColor(state.ctx);
-        });
+      if (isRenderCanvas && canvasRef.value) {
+        const canvas = canvasRef.value;
+        const dpr = import_utils.inBrowser ? window.devicePixelRatio : 1;
+        canvasWidth = canvas.width = (((_a = wrapRef.value) == null ? void 0 : _a.offsetWidth) || 0) * dpr;
+        canvasHeight = canvas.height = (((_b = wrapRef.value) == null ? void 0 : _b.offsetHeight) || 0) * dpr;
+        (_c = ctx.value) == null ? void 0 : _c.scale(dpr, dpr);
+        setCanvasBgColor(ctx.value);
       }
     });
     return () => (0, import_vue.createVNode)("div", {
@@ -145,8 +145,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
       "ref": wrapRef
     }, [isRenderCanvas ? (0, import_vue.createVNode)("canvas", {
       "ref": canvasRef,
-      "width": state.width,
-      "height": state.height,
       "onTouchstartPassive": touchStart,
       "onTouchmove": touchMove,
       "onTouchend": touchEnd

package/lib/swipe/Swipe.js

@@ -89,7 +89,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const trackStyle = (0, import_vue2.computed)(() => {
       const style = {
         transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
-        transform: `translate${props.vertical ? "Y" : "X"}(${state.offset}px)`
+        transform: `translate${props.vertical ? "Y" : "X"}(${+state.offset.toFixed(2)}px)`
       };
       if (size.value) {
         const mainAxis = props.vertical ? "height" : "width";

package/lib/swipe/index.css

@@ -1 +1 @@
-:root{--van-swipe-indicator-size: 6px;--van-swipe-indicator-margin: var(--van-padding-sm);--van-swipe-indicator-active-opacity: 1;--van-swipe-indicator-inactive-opacity: .3;--van-swipe-indicator-active-background: var(--van-primary-color);--van-swipe-indicator-inactive-background: var(--van-border-color)}.van-swipe{position:relative;overflow:hidden;transform:translateZ(0);cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.van-swipe__track{display:flex;height:100%}.van-swipe__track--vertical{flex-direction:column}.van-swipe__indicators{position:absolute;bottom:var(--van-swipe-indicator-margin);left:50%;display:flex;transform:translate(-50%)}.van-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--van-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child){margin-bottom:var(--van-swipe-indicator-size)}.van-swipe__indicator{width:var(--van-swipe-indicator-size);height:var(--van-swipe-indicator-size);background-color:var(--van-swipe-indicator-inactive-background);border-radius:100%;opacity:var(--van-swipe-indicator-inactive-opacity);transition:opacity var(--van-duration-fast),background-color var(--van-duration-fast)}.van-swipe__indicator:not(:last-child){margin-right:var(--van-swipe-indicator-size)}.van-swipe__indicator--active{background-color:var(--van-swipe-indicator-active-background);opacity:var(--van-swipe-indicator-active-opacity)}
+:root{--van-swipe-indicator-size: 6px;--van-swipe-indicator-margin: var(--van-padding-sm);--van-swipe-indicator-active-opacity: 1;--van-swipe-indicator-inactive-opacity: .3;--van-swipe-indicator-active-background: var(--van-primary-color);--van-swipe-indicator-inactive-background: var(--van-border-color)}.van-swipe{position:relative;overflow:hidden;transform:translateZ(0);cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.van-swipe__track{display:flex;height:100%;transition-property:transform}.van-swipe__track--vertical{flex-direction:column}.van-swipe__indicators{position:absolute;bottom:var(--van-swipe-indicator-margin);left:50%;display:flex;transform:translate(-50%)}.van-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--van-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child){margin-bottom:var(--van-swipe-indicator-size)}.van-swipe__indicator{width:var(--van-swipe-indicator-size);height:var(--van-swipe-indicator-size);background-color:var(--van-swipe-indicator-inactive-background);border-radius:100%;opacity:var(--van-swipe-indicator-inactive-opacity);transition:opacity var(--van-duration-fast),background-color var(--van-duration-fast)}.van-swipe__indicator:not(:last-child){margin-right:var(--van-swipe-indicator-size)}.van-swipe__indicator--active{background-color:var(--van-swipe-indicator-active-background);opacity:var(--van-swipe-indicator-active-opacity)}

package/lib/toast/function-call.d.ts

@@ -1,10 +1,36 @@
 import type { ToastType, ToastOptions, ToastWrapperInstance } from './types';
+/**
+ * Display a text toast
+ */
 export declare function showToast(options?: string | ToastOptions): ToastWrapperInstance;
+/**
+ * Display a loading toast
+ */
 export declare const showLoadingToast: (options: string | ToastOptions) => ToastWrapperInstance;
+/**
+ * Display a success toast
+ */
 export declare const showSuccessToast: (options: string | ToastOptions) => ToastWrapperInstance;
+/**
+ * Display a fail toast
+ */
 export declare const showFailToast: (options: string | ToastOptions) => ToastWrapperInstance;
+/**
+ * Close the currently displayed toast
+ */
 export declare const closeToast: (all?: boolean) => void;
+/**
+ * Modify the default configuration that affects all `showToast` calls.
+ * Specify the `type` parameter to modify the default configuration of a specific type of toast
+ */
 export declare function setToastDefaultOptions(options: ToastOptions): void;
 export declare function setToastDefaultOptions(type: ToastType, options: ToastOptions): void;
+/**
+ * Reset the default configuration that affects all `showToast` calls.
+ * Specify the `type` parameter to reset the default configuration of a specific type of toast
+ */
 export declare const resetToastDefaultOptions: (type?: ToastType) => void;
+/**
+ * Allow multiple toasts to be displayed as the same time
+ */
 export declare const allowMultipleToast: (value?: boolean) => void;

package/lib/uploader/Uploader.js

@@ -80,6 +80,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const inputRef = (0, import_vue2.ref)();
     const urls = [];
     const reuploadIndex = (0, import_vue2.ref)(-1);
+    const isReuploading = (0, import_vue2.ref)(false);
     const getDetail = (index = props.modelValue.length) => ({
       name: props.name,
       index
@@ -216,8 +217,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
       emit("delete", item, getDetail(index));
     };
     const reuploadImage = (index) => {
-      chooseFile();
+      isReuploading.value = true;
       reuploadIndex.value = index;
+      (0, import_vue2.nextTick)(() => chooseFile());
+    };
+    const onInputClick = () => {
+      if (!isReuploading.value) {
+        reuploadIndex.value = -1;
+      }
+      isReuploading.value = false;
     };
     const renderPreviewItem = (item, index) => {
       const needPickData = ["imageFit", "deletable", "reupload", "previewSize", "beforeDelete"];
@@ -250,7 +258,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "capture": props.capture,
         "multiple": props.multiple && reuploadIndex.value === -1,
         "disabled": props.disabled,
-        "onChange": onChange
+        "onChange": onChange,
+        "onClick": onInputClick
       }, null);
       if (slots.default) {
         return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {

package/lib/vant.cjs.js

@@ -1250,6 +1250,11 @@ function useLazyRender(show) {
   );
   return (render) => () => inited.value ? render() : null;
 }
+const useScopeId = () => {
+  var _a;
+  const { scopeId } = ((_a = vue.getCurrentInstance()) == null ? void 0 : _a.vnode) || {};
+  return scopeId ? { [scopeId]: "" } : null;
+};
 const [name$1B, bem$1w] = createNamespace("overlay");
 const overlayProps = {
   show: Boolean,
@@ -1361,16 +1366,17 @@ var stdin_default$1J = vue.defineComponent({
     };
     const renderOverlay = () => {
       if (props2.overlay) {
-        return vue.createVNode(Overlay, {
+        return vue.createVNode(Overlay, vue.mergeProps({
           "show": props2.show,
           "class": props2.overlayClass,
           "zIndex": zIndex.value,
           "duration": props2.duration,
           "customStyle": props2.overlayStyle,
           "role": props2.closeOnClickOverlay ? "button" : void 0,
-          "tabindex": props2.closeOnClickOverlay ? 0 : void 0,
+          "tabindex": props2.closeOnClickOverlay ? 0 : void 0
+        }, useScopeId(), {
           "onClick": onClickOverlay
-        }, {
+        }), {
           default: slots["overlay-content"]
         });
       }
@@ -1422,7 +1428,7 @@ var stdin_default$1J = vue.defineComponent({
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vue.vShow, props2.show]]);
+      }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vue.vShow, props2.show]]);
     });
     const renderTransition = () => {
       const {
@@ -2222,7 +2228,7 @@ var stdin_default$1E = vue.defineComponent({
     const trackStyle = vue.computed(() => {
       const style = {
         transitionDuration: `${state.swiping ? 0 : props2.duration}ms`,
-        transform: `translate${props2.vertical ? "Y" : "X"}(${state.offset}px)`
+        transform: `translate${props2.vertical ? "Y" : "X"}(${+state.offset.toFixed(2)}px)`
       };
       if (size.value) {
         const mainAxis = props2.vertical ? "height" : "width";
@@ -7453,7 +7459,7 @@ var stdin_default$1a = vue.defineComponent({
         }), {
           [BORDER_TOP_BOTTOM]: props2.border && !props2.inset
         }]
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
     const renderTitle = () => vue.createVNode("div", {
       "class": bem$10("title", {
@@ -9954,7 +9960,7 @@ const FloatingBubble = withInstall(stdin_default$R);
 const floatingPanelProps = {
   height: makeNumericProp(0),
   anchors: makeArrayProp(),
-  duration: makeNumericProp(0.2),
+  duration: makeNumericProp(0.3),
   contentDraggable: truthProp,
   lockScroll: Boolean,
   safeAreaInsetBottom: truthProp
@@ -9984,7 +9990,7 @@ var stdin_default$Q = vue.defineComponent({
     const rootStyle = vue.computed(() => ({
       height: addUnit(boundary.value.max),
       transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
-      transition: !dragging.value ? `transform ${props2.duration}s` : "none"
+      transition: !dragging.value ? `transform ${props2.duration}s cubic-bezier(0.18, 0.89, 0.32, 1.28)` : "none"
     }));
     const ease = (moveY) => {
       const absDistance = Math.abs(moveY);
@@ -10262,6 +10268,7 @@ var stdin_default$N = vue.defineComponent({
     rootWidth: makeRequiredProp(Number),
     rootHeight: makeRequiredProp(Number),
     disableZoom: Boolean,
+    doubleScale: Boolean,
     closeOnClickOverlay: Boolean
   },
   emits: ["scale", "close", "longPress"],
@@ -10435,18 +10442,22 @@ var stdin_default$N = vue.defineComponent({
       const TAP_TIME = 250;
       if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
         if (deltaTime < TAP_TIME) {
-          if (doubleTapTimer) {
-            clearTimeout(doubleTapTimer);
-            doubleTapTimer = null;
-            toggleScale();
-          } else {
-            if (!props2.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
-              return;
-            }
-            doubleTapTimer = setTimeout(() => {
-              emit("close");
+          if (props2.doubleScale) {
+            if (doubleTapTimer) {
+              clearTimeout(doubleTapTimer);
               doubleTapTimer = null;
-            }, TAP_TIME);
+              toggleScale();
+            } else {
+              if (!props2.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
+                return;
+              }
+              doubleTapTimer = setTimeout(() => {
+                emit("close");
+                doubleTapTimer = null;
+              }, TAP_TIME);
+            }
+          } else {
+            emit("close");
           }
         } else if (deltaTime > LONG_PRESS_START_TIME) {
           emit("longPress");
@@ -10571,6 +10582,7 @@ const imagePreviewProps = {
   closeIcon: makeStringProp("clear"),
   transition: String,
   beforeClose: Function,
+  doubleScale: truthProp,
   overlayClass: unknownProp,
   overlayStyle: Object,
   swipeDuration: makeNumericProp(300),
@@ -10662,6 +10674,7 @@ var stdin_default$M = vue.defineComponent({
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
         "disableZoom": state.disableZoom,
+        "doubleScale": props2.doubleScale,
         "closeOnClickOverlay": props2.closeOnClickOverlay,
         "onScale": emitScale,
         "onClose": emitClose,
@@ -10739,6 +10752,7 @@ const defaultConfig = {
   closeIcon: "clear",
   transition: void 0,
   beforeClose: void 0,
+  doubleScale: true,
   overlayStyle: void 0,
   overlayClass: void 0,
   startPosition: 0,
@@ -12267,7 +12281,7 @@ var stdin_default$B = vue.defineComponent({
         "transition": "van-popover-zoom",
         "lockScroll": false,
         "onUpdate:show": updateShow
-      }, attrs, pick(props2, popupProps)), {
+      }, attrs, useScopeId(), pick(props2, popupProps)), {
         default: () => [props2.showArrow && vue.createVNode("div", {
           "class": bem$s("arrow")
         }, null), vue.createVNode("div", {
@@ -13229,37 +13243,37 @@ var stdin_default$r = vue.defineComponent({
   }) {
     const canvasRef = vue.ref();
     const wrapRef = vue.ref();
-    const state = vue.reactive({
-      width: 0,
-      height: 0,
-      ctx: null,
-      ratio: inBrowser ? window.devicePixelRatio : 1
+    const ctx = vue.computed(() => {
+      if (!canvasRef.value)
+        return null;
+      return canvasRef.value.getContext("2d");
     });
-    let canvasRect;
     const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
+    let canvasWidth = 0;
+    let canvasHeight = 0;
+    let canvasRect;
     const touchStart = () => {
-      if (!state.ctx) {
+      if (!ctx.value) {
         return false;
       }
-      state.ctx.beginPath();
-      state.ctx.lineWidth = props2.lineWidth * state.ratio;
-      state.ctx.strokeStyle = props2.penColor;
+      ctx.value.beginPath();
+      ctx.value.lineWidth = props2.lineWidth;
+      ctx.value.strokeStyle = props2.penColor;
       canvasRect = use.useRect(canvasRef);
       emit("start");
     };
     const touchMove = (event) => {
-      var _a, _b;
-      if (!state.ctx) {
+      if (!ctx.value) {
         return false;
       }
       preventDefault(event);
       const touch = event.touches[0];
-      const mouseX = (touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0)) * state.ratio;
-      const mouseY = (touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0)) * state.ratio;
-      state.ctx.lineCap = "round";
-      state.ctx.lineJoin = "round";
-      (_a = state.ctx) == null ? void 0 : _a.lineTo(mouseX, mouseY);
-      (_b = state.ctx) == null ? void 0 : _b.stroke();
+      const mouseX = touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0);
+      const mouseY = touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0);
+      ctx.value.lineCap = "round";
+      ctx.value.lineJoin = "round";
+      ctx.value.lineTo(mouseX, mouseY);
+      ctx.value.stroke();
       emit("signing", event);
     };
     const touchEnd = (event) => {
@@ -13276,10 +13290,10 @@ var stdin_default$r = vue.defineComponent({
       }
       return canvas.toDataURL() === empty.toDataURL();
     };
-    const setCanvasBgColor = (ctx) => {
-      if (ctx && props2.backgroundColor) {
-        ctx.fillStyle = props2.backgroundColor;
-        ctx.fillRect(0, 0, state.width, state.height);
+    const setCanvasBgColor = (ctx2) => {
+      if (ctx2 && props2.backgroundColor) {
+        ctx2.fillStyle = props2.backgroundColor;
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
       }
     };
     const submit = () => {
@@ -13299,22 +13313,22 @@ var stdin_default$r = vue.defineComponent({
       });
     };
     const clear = () => {
-      if (state.ctx) {
-        state.ctx.clearRect(0, 0, state.width, state.height);
-        state.ctx.closePath();
-        setCanvasBgColor(state.ctx);
+      if (ctx.value) {
+        ctx.value.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.value.closePath();
+        setCanvasBgColor(ctx.value);
       }
       emit("clear");
     };
     vue.onMounted(() => {
       var _a, _b, _c;
-      if (isRenderCanvas) {
-        state.ctx = (_a = canvasRef.value) == null ? void 0 : _a.getContext("2d");
-        state.width = (((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0) * state.ratio;
-        state.height = (((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0) * state.ratio;
-        vue.nextTick(() => {
-          setCanvasBgColor(state.ctx);
-        });
+      if (isRenderCanvas && canvasRef.value) {
+        const canvas = canvasRef.value;
+        const dpr = inBrowser ? window.devicePixelRatio : 1;
+        canvasWidth = canvas.width = (((_a = wrapRef.value) == null ? void 0 : _a.offsetWidth) || 0) * dpr;
+        canvasHeight = canvas.height = (((_b = wrapRef.value) == null ? void 0 : _b.offsetHeight) || 0) * dpr;
+        (_c = ctx.value) == null ? void 0 : _c.scale(dpr, dpr);
+        setCanvasBgColor(ctx.value);
       }
     });
     return () => vue.createVNode("div", {
@@ -13324,8 +13338,6 @@ var stdin_default$r = vue.defineComponent({
       "ref": wrapRef
     }, [isRenderCanvas ? vue.createVNode("canvas", {
       "ref": canvasRef,
-      "width": state.width,
-      "height": state.height,
       "onTouchstartPassive": touchStart,
       "onTouchmove": touchMove,
       "onTouchend": touchEnd
@@ -15283,6 +15295,7 @@ var stdin_default$5 = vue.defineComponent({
     const inputRef = vue.ref();
     const urls = [];
     const reuploadIndex = vue.ref(-1);
+    const isReuploading = vue.ref(false);
     const getDetail = (index = props2.modelValue.length) => ({
       name: props2.name,
       index
@@ -15419,8 +15432,15 @@ var stdin_default$5 = vue.defineComponent({
       emit("delete", item, getDetail(index));
     };
     const reuploadImage = (index) => {
-      chooseFile();
+      isReuploading.value = true;
       reuploadIndex.value = index;
+      vue.nextTick(() => chooseFile());
+    };
+    const onInputClick = () => {
+      if (!isReuploading.value) {
+        reuploadIndex.value = -1;
+      }
+      isReuploading.value = false;
     };
     const renderPreviewItem = (item, index) => {
       const needPickData = ["imageFit", "deletable", "reupload", "previewSize", "beforeDelete"];
@@ -15453,7 +15473,8 @@ var stdin_default$5 = vue.defineComponent({
         "capture": props2.capture,
         "multiple": props2.multiple && reuploadIndex.value === -1,
         "disabled": props2.disabled,
-        "onChange": onChange
+        "onChange": onChange,
+        "onClick": onInputClick
       }, null);
       if (slots.default) {
         return vue.withDirectives(vue.createVNode("div", {
@@ -16499,7 +16520,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.7.0";
+const version = "4.7.2";
 function install(app) {
   const components = [
     ActionBar,