vant 4.3.2 → 4.4.0

package/es/divider/Divider.mjs

@@ -5,6 +5,7 @@ const [name, bem] = createNamespace("divider");
 const dividerProps = {
   dashed: Boolean,
   hairline: truthProp,
+  vertical: Boolean,
   contentPosition: makeStringProp("center")
 };
 var stdin_default = defineComponent({
@@ -20,9 +21,10 @@ var stdin_default = defineComponent({
         "class": bem({
           dashed: props.dashed,
           hairline: props.hairline,
-          [`content-${props.contentPosition}`]: !!slots.default
+          vertical: props.vertical,
+          [`content-${props.contentPosition}`]: !!slots.default && !props.vertical
         })
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      }, [!props.vertical && ((_a = slots.default) == null ? void 0 : _a.call(slots))]);
     };
   }
 });

package/es/divider/index.css

@@ -1 +1 @@
-:root{--van-divider-margin: var(--van-padding-md) 0;--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}
+:root{--van-divider-margin: var(--van-padding-md) 0;--van-divider-vertical-margin: 0 var(--van-padding-xs);--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}.van-divider--vertical{display:inline-block;width:var(--van-border-width);height:1em;margin:var(--van-divider-vertical-margin);vertical-align:middle}.van-divider--vertical:before{height:100%;border-width:0 0 0 var(--van-border-width)}.van-divider--vertical:after{display:none}.van-divider--vertical.van-divider--hairline:before{transform:scaleX(.5)}

package/es/divider/index.d.ts

@@ -4,6 +4,7 @@ export declare const Divider: import("../utils").WithInstall<import("vue").Defin
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<import("./Divider").DividerContentPosition>;
         default: import("./Divider").DividerContentPosition;
@@ -14,11 +15,13 @@ export declare const Divider: import("../utils").WithInstall<import("vue").Defin
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<import("./Divider").DividerContentPosition>;
         default: import("./Divider").DividerContentPosition;
     };
 }>>, {
+    vertical: boolean;
     hairline: boolean;
     dashed: boolean;
     contentPosition: import("./Divider").DividerContentPosition;

package/es/image-preview/ImagePreviewItem.mjs

@@ -12,6 +12,7 @@ const getCenter = (touches) => ({
   y: (touches[0].clientY + touches[1].clientY) / 2
 });
 const bem = createNamespace("image-preview")[1];
+const longImageRatio = 2.6;
 var stdin_default = defineComponent({
   props: {
     src: String,
@@ -34,21 +35,14 @@ var stdin_default = defineComponent({
       moveY: 0,
       moving: false,
       zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
+      imageRatio: 0
     });
     const touch = useTouch();
     const imageRef = ref();
     const swipeItem = ref();
-    const vertical = computed(() => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
+    const vertical = ref(false);
+    const isLongImage = ref(false);
+    let initialMoveY = 0;
     const imageStyle = computed(() => {
       const {
         scale,
@@ -60,7 +54,7 @@ var stdin_default = defineComponent({
       const style = {
         transitionDuration: zooming || moving ? "0s" : ".3s"
       };
-      if (scale !== 1) {
+      if (scale !== 1 || isLongImage.value) {
         style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
@@ -105,7 +99,7 @@ var stdin_default = defineComponent({
           state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
         } else {
           state.moveX = 0;
-          state.moveY = 0;
+          state.moveY = isLongImage.value ? initialMoveY : 0;
         }
         emit("scale", {
           scale,
@@ -118,7 +112,7 @@ var stdin_default = defineComponent({
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale, scale === 2 ? {
+      setScale(scale, scale === 2 || isLongImage.value ? {
         x: touch.startX.value,
         y: touch.startY.value
       } : void 0);
@@ -148,7 +142,7 @@ var stdin_default = defineComponent({
       startMoveY = state.moveY;
       touchStartTime = Date.now();
       isImageMoved = false;
-      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.moving = fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
       state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
@@ -244,12 +238,30 @@ var stdin_default = defineComponent({
       checkTap();
       touch.reset();
     };
+    const resize = () => {
+      const {
+        rootWidth,
+        rootHeight
+      } = props;
+      const rootRatio = rootHeight / rootWidth;
+      const {
+        imageRatio
+      } = state;
+      vertical.value = state.imageRatio > rootRatio && imageRatio < longImageRatio;
+      isLongImage.value = state.imageRatio > rootRatio && imageRatio >= longImageRatio;
+      if (isLongImage.value) {
+        initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
+        state.moveY = initialMoveY;
+      }
+      resetScale();
+    };
     const onLoad = (event) => {
       const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
+      resize();
     };
     watch(() => props.active, resetScale);
     watch(() => props.show, (value) => {
@@ -257,6 +269,7 @@ var stdin_default = defineComponent({
         resetScale();
       }
     });
+    watch(() => [props.rootWidth, props.rootHeight], resize);
     useEventListener("touchmove", onTouchMove, {
       target: computed(() => {
         var _a;

package/es/index.d.ts

@@ -7,6 +7,7 @@ export * from "./address-list";
 export * from "./area";
 export * from "./back-top";
 export * from "./badge";
+export * from "./barrage";
 export * from "./button";
 export * from "./calendar";
 export * from "./card";
@@ -101,4 +102,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.3.2";
+export const version: "4.4.0";

package/es/index.mjs

@@ -7,6 +7,7 @@ import { AddressList } from "./address-list/index.mjs";
 import { Area } from "./area/index.mjs";
 import { BackTop } from "./back-top/index.mjs";
 import { Badge } from "./badge/index.mjs";
+import { Barrage } from "./barrage/index.mjs";
 import { Button } from "./button/index.mjs";
 import { Calendar } from "./calendar/index.mjs";
 import { Card } from "./card/index.mjs";
@@ -94,7 +95,7 @@ import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Watermark } from "./watermark/index.mjs";
-const version = "4.3.2";
+const version = "4.4.0";
 function install(app) {
   const components = [
     ActionBar,
@@ -106,6 +107,7 @@ function install(app) {
     Area,
     BackTop,
     Badge,
+    Barrage,
     Button,
     Calendar,
     Card,
@@ -211,6 +213,7 @@ export * from "./address-list/index.mjs";
 export * from "./area/index.mjs";
 export * from "./back-top/index.mjs";
 export * from "./badge/index.mjs";
+export * from "./barrage/index.mjs";
 export * from "./button/index.mjs";
 export * from "./calendar/index.mjs";
 export * from "./card/index.mjs";

package/es/notice-bar/NoticeBar.d.ts

@@ -64,8 +64,8 @@ declare const _default: import("vue").DefineComponent<{
     onReplay?: ((...args: any[]) => any) | undefined;
 }, {
     scrollable: boolean | null;
-    speed: string | number;
     delay: string | number;
+    speed: string | number;
     wrapable: boolean;
 }>;
 export default _default;

package/es/notice-bar/index.d.ts

@@ -42,8 +42,8 @@ export declare const NoticeBar: import("../utils").WithInstall<import("vue").Def
     onReplay?: ((...args: any[]) => any) | undefined;
 }, {
     scrollable: boolean | null;
-    speed: string | number;
     delay: string | number;
+    speed: string | number;
     wrapable: boolean;
 }>>;
 export default NoticeBar;

package/es/signature/Signature.d.ts

@@ -14,6 +14,10 @@ export declare const signatureProps: {
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 };
 export type SignatureProps = ExtractPropTypes<typeof signatureProps>;
@@ -32,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "start" | "clear" | "end" | "signing")[], "submit" | "start" | "clear" | "end" | "signing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     tips: StringConstructor;
@@ -48,6 +56,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
@@ -57,6 +69,7 @@ declare const _default: import("vue").DefineComponent<{
     onSigning?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
+    backgroundColor: string;
     lineWidth: number;
     penColor: string;
 }>;

package/es/signature/Signature.mjs

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode } from "vue";
-import { ref, reactive, onMounted, defineComponent } from "vue";
+import { ref, reactive, onMounted, nextTick, defineComponent } from "vue";
 import { inBrowser, makeNumberProp, makeStringProp, createNamespace, preventDefault } from "../utils/index.mjs";
 import { useRect } from "@vant/use";
 import { Button } from "../button/index.mjs";
@@ -10,6 +10,7 @@ const signatureProps = {
   penColor: makeStringProp("#000"),
   lineWidth: makeNumberProp(3),
   clearButtonText: String,
+  backgroundColor: makeStringProp(""),
   confirmButtonText: String
 };
 const hasCanvasSupport = () => {
@@ -29,7 +30,8 @@ var stdin_default = defineComponent({
     const state = reactive({
       width: 0,
       height: 0,
-      ctx: null
+      ctx: null,
+      ratio: inBrowser ? window.devicePixelRatio : 1
     });
     let canvasRect;
     const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
@@ -38,7 +40,7 @@ var stdin_default = defineComponent({
         return false;
       }
       state.ctx.beginPath();
-      state.ctx.lineWidth = props.lineWidth;
+      state.ctx.lineWidth = props.lineWidth * state.ratio;
       state.ctx.strokeStyle = props.penColor;
       canvasRect = useRect(canvasRef);
       emit("start");
@@ -50,8 +52,8 @@ var stdin_default = defineComponent({
       }
       preventDefault(event);
       const touch = event.touches[0];
-      const mouseX = touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0);
-      const mouseY = touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 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);
@@ -68,13 +70,23 @@ var stdin_default = defineComponent({
       empty.height = canvas.height;
       return canvas.toDataURL() === empty.toDataURL();
     };
+    const setCanvasBgColor = () => {
+      if (state.ctx && props.backgroundColor) {
+        state.ctx.fillStyle = props.backgroundColor;
+        state.ctx.fillRect(0, 0, state.width, state.height);
+      }
+    };
     const submit = () => {
+      var _a, _b;
       const canvas = canvasRef.value;
       if (!canvas) {
         return;
       }
       const isEmpty = isCanvasEmpty(canvas);
-      const image = isEmpty ? "" : canvas.toDataURL(`image/${props.type}`, props.type === "jpg" ? 0.9 : null);
+      const image = isEmpty ? "" : ((_b = (_a = {
+        jpg: () => canvas.toDataURL("image/jpeg", 0.8),
+        jpeg: () => canvas.toDataURL("image/jpeg", 0.8)
+      })[props.type]) == null ? void 0 : _b.call(_a)) || canvas.toDataURL(`image/${props.type}`);
       emit("submit", {
         image,
         canvas
@@ -84,6 +96,7 @@ var stdin_default = defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
+        setCanvasBgColor();
       }
       emit("clear");
     };
@@ -91,8 +104,11 @@ var stdin_default = defineComponent({
       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.height = ((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0;
+        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;
+        nextTick(() => {
+          setCanvasBgColor();
+        });
       }
     });
     return () => _createVNode("div", {

package/es/signature/index.css

@@ -1 +1 @@
-:root{--van-signature-padding: var(--van-padding-xs);--van-signature-content-height: 200px;--van-signature-content-background: var(--van-background-2);--van-signature-content-border: 1px dotted #dadada}.van-signature{padding:var(--van-signature-padding)}.van-signature__content{display:flex;justify-content:center;align-items:center;height:var(--van-signature-content-height);background-color:var(--van-signature-content-background);border:var(--van-signature-content-border);border-radius:var(--van-radius-lg);overflow:hidden}.van-signature__footer{display:flex;justify-content:flex-end}.van-signature__footer .van-button{padding:0 var(--van-padding-md);margin-top:var(--van-padding-xs);margin-left:var(--van-padding-xs)}
+:root{--van-signature-padding: var(--van-padding-xs);--van-signature-content-height: 200px;--van-signature-content-background: var(--van-background-2);--van-signature-content-border: 1px dotted #dadada}.van-signature{padding:var(--van-signature-padding)}.van-signature__content{display:flex;justify-content:center;align-items:center;height:var(--van-signature-content-height);background-color:var(--van-signature-content-background);border:var(--van-signature-content-border);border-radius:var(--van-radius-lg);overflow:hidden}.van-signature__content canvas{width:100%;height:100%}.van-signature__footer{display:flex;justify-content:flex-end}.van-signature__footer .van-button{padding:0 var(--van-padding-md);margin-top:var(--van-padding-xs);margin-left:var(--van-padding-xs)}

package/es/signature/index.d.ts

@@ -13,6 +13,10 @@ export declare const Signature: import("../utils").WithInstall<import("vue").Def
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "start" | "clear" | "end" | "signing")[], "submit" | "start" | "clear" | "end" | "signing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tips: StringConstructor;
@@ -29,6 +33,10 @@ export declare const Signature: import("../utils").WithInstall<import("vue").Def
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
@@ -38,6 +46,7 @@ export declare const Signature: import("../utils").WithInstall<import("vue").Def
     onSigning?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
+    backgroundColor: string;
     lineWidth: number;
     penColor: string;
 }>>;

package/es/uploader/Uploader.d.ts

@@ -38,6 +38,7 @@ export declare const uploaderProps: {
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: PropType<UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -100,6 +101,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: PropType<UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -125,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UploaderMaxSize>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview" | "clickReupload")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview" | "clickReupload", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     name: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -160,6 +162,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: PropType<UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -192,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickUpload?: ((...args: any[]) => any) | undefined;
     onClosePreview?: ((...args: any[]) => any) | undefined;
     onClickPreview?: ((...args: any[]) => any) | undefined;
+    onClickReupload?: ((...args: any[]) => any) | undefined;
 }, {
     name: string | number;
     accept: string;
@@ -205,6 +209,7 @@ declare const _default: import("vue").DefineComponent<{
     resultType: UploaderResultType;
     uploadIcon: string;
     deletable: boolean;
+    reupload: boolean;
     showUpload: boolean;
     previewImage: boolean;
     previewFullImage: boolean;

package/es/uploader/Uploader.mjs

@@ -21,6 +21,7 @@ const uploaderProps = {
   uploadIcon: makeStringProp("photograph"),
   uploadText: String,
   deletable: truthProp,
+  reupload: Boolean,
   afterRead: Function,
   showUpload: truthProp,
   modelValue: makeArrayProp(),
@@ -38,13 +39,14 @@ const uploaderProps = {
 var stdin_default = defineComponent({
   name,
   props: uploaderProps,
-  emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "update:modelValue"],
+  emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "clickReupload", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
     const inputRef = ref();
     const urls = [];
+    const reuploadIndex = ref(-1);
     const getDetail = (index = props.modelValue.length) => ({
       name: props.name,
       index
@@ -70,7 +72,14 @@ var stdin_default = defineComponent({
         }
       }
       items = reactive(items);
-      emit("update:modelValue", [...props.modelValue, ...toArray(items)]);
+      if (reuploadIndex.value > -1) {
+        const arr = [...props.modelValue];
+        arr.splice(reuploadIndex.value, 1, items);
+        emit("update:modelValue", arr);
+        reuploadIndex.value = -1;
+      } else {
+        emit("update:modelValue", [...props.modelValue, ...toArray(items)]);
+      }
       if (props.afterRead) {
         props.afterRead(items, getDetail());
       }
@@ -171,15 +180,20 @@ var stdin_default = defineComponent({
       emit("update:modelValue", fileList);
       emit("delete", item, getDetail(index));
     };
+    const reuploadImage = (index) => {
+      chooseFile();
+      reuploadIndex.value = index;
+    };
     const renderPreviewItem = (item, index) => {
-      const needPickData = ["imageFit", "deletable", "previewSize", "beforeDelete"];
+      const needPickData = ["imageFit", "deletable", "reupload", "previewSize", "beforeDelete"];
       const previewData = extend(pick(props, needPickData), pick(item, needPickData, true));
       return _createVNode(UploaderPreviewItem, _mergeProps({
         "item": item,
         "index": index,
-        "onClick": () => emit("clickPreview", item, getDetail(index)),
+        "onClick": () => emit(props.reupload ? "clickReupload" : "clickPreview", item, getDetail(index)),
         "onDelete": () => deleteFile(item, index),
-        "onPreview": () => previewImage(item)
+        "onPreview": () => previewImage(item),
+        "onReupload": () => reuploadImage(index)
       }, pick(props, ["name", "lazyLoad"]), previewData), pick(slots, ["preview-cover", "preview-delete"]));
     };
     const renderPreviewList = () => {
@@ -189,24 +203,25 @@ var stdin_default = defineComponent({
     };
     const onClickUpload = (event) => emit("clickUpload", event);
     const renderUpload = () => {
-      if (props.modelValue.length >= +props.maxCount) {
+      if (props.modelValue.length >= +props.maxCount && !props.reupload) {
         return;
       }
+      const hideUploader = props.modelValue.length >= +props.maxCount && props.reupload;
       const Input = props.readonly ? null : _createVNode("input", {
         "ref": inputRef,
         "type": "file",
         "class": bem("input"),
         "accept": props.accept,
         "capture": props.capture,
-        "multiple": props.multiple,
+        "multiple": props.multiple && reuploadIndex.value === -1,
         "disabled": props.disabled,
         "onChange": onChange
       }, null);
       if (slots.default) {
-        return _createVNode("div", {
+        return _withDirectives(_createVNode("div", {
           "class": bem("input-wrapper"),
           "onClick": onClickUpload
-        }, [slots.default(), Input]);
+        }, [slots.default(), Input]), [[_vShow, !hideUploader]]);
       }
       return _withDirectives(_createVNode("div", {
         "class": bem("upload", {
@@ -219,7 +234,7 @@ var stdin_default = defineComponent({
         "class": bem("upload-icon")
       }, null), props.uploadText && _createVNode("span", {
         "class": bem("upload-text")
-      }, [props.uploadText]), Input]), [[_vShow, props.showUpload]]);
+      }, [props.uploadText]), Input]), [[_vShow, props.showUpload && !hideUploader]]);
     };
     const chooseFile = () => {
       if (inputRef.value && !props.disabled) {

package/es/uploader/UploaderPreviewItem.d.ts

@@ -12,9 +12,10 @@ declare const _default: import("vue").DefineComponent<{
     imageFit: PropType<ImageFit>;
     lazyLoad: BooleanConstructor;
     deletable: BooleanConstructor;
+    reupload: BooleanConstructor;
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "reupload" | "preview")[], "delete" | "reupload" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: (NumberConstructor | StringConstructor)[];
     item: {
         type: PropType<UploaderFileListItem>;
@@ -24,13 +25,16 @@ declare const _default: import("vue").DefineComponent<{
     imageFit: PropType<ImageFit>;
     lazyLoad: BooleanConstructor;
     deletable: BooleanConstructor;
+    reupload: BooleanConstructor;
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
+    onReupload?: ((...args: any[]) => any) | undefined;
     onPreview?: ((...args: any[]) => any) | undefined;
 }, {
     lazyLoad: boolean;
     deletable: boolean;
+    reupload: boolean;
 }>;
 export default _default;

package/es/uploader/UploaderPreviewItem.mjs

@@ -13,10 +13,11 @@ var stdin_default = defineComponent({
     imageFit: String,
     lazyLoad: Boolean,
     deletable: Boolean,
+    reupload: Boolean,
     previewSize: [Number, String, Array],
     beforeDelete: Function
   },
-  emits: ["delete", "preview"],
+  emits: ["delete", "preview", "reupload"],
   setup(props, {
     emit,
     slots
@@ -58,6 +59,7 @@ var stdin_default = defineComponent({
       });
     };
     const onPreview = () => emit("preview");
+    const onReupload = () => emit("reupload");
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== "uploading") {
         const slot = slots["preview-delete"];
@@ -93,7 +95,8 @@ var stdin_default = defineComponent({
         item,
         lazyLoad,
         imageFit,
-        previewSize
+        previewSize,
+        reupload
       } = props;
       if (isImageFile(item)) {
         return _createVNode(Image, {
@@ -103,7 +106,7 @@ var stdin_default = defineComponent({
           "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
           "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
           "lazyLoad": lazyLoad,
-          "onClick": onPreview
+          "onClick": reupload ? onReupload : onPreview
         }, {
           default: renderCover
         });

package/es/uploader/index.d.ts

@@ -34,6 +34,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: import("vue").PropType<import("./types").UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -59,7 +60,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
         type: import("vue").PropType<import("./types").UploaderMaxSize>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview" | "clickReupload")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview" | "clickReupload", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -94,6 +95,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: import("vue").PropType<import("./types").UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -126,6 +128,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     onClickUpload?: ((...args: any[]) => any) | undefined;
     onClosePreview?: ((...args: any[]) => any) | undefined;
     onClickPreview?: ((...args: any[]) => any) | undefined;
+    onClickReupload?: ((...args: any[]) => any) | undefined;
 }, {
     name: string | number;
     accept: string;
@@ -139,6 +142,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     resultType: import("./types").UploaderResultType;
     uploadIcon: string;
     deletable: boolean;
+    reupload: boolean;
     showUpload: boolean;
     previewImage: boolean;
     previewFullImage: boolean;