diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index c978f58fe..f9691d577 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -177,8 +177,9 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
+
diff --git a/src/style/var.less b/src/style/var.less
index 60cb31459..a0957a179 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -815,9 +815,9 @@
@uploader-text-font-size: @font-size-sm;
@uploader-upload-background-color: @gray-1;
@uploader-upload-active-color: @active-color;
-@uploader-delete-color: @gray-6;
-@uploader-delete-icon-size: 18px;
-@uploader-delete-background-color: @white;
+@uploader-delete-color: @white;
+@uploader-delete-icon-size: 14px;
+@uploader-delete-background-color: rgba(0, 0, 0, 0.7);
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-7;
diff --git a/src/uploader/index.js b/src/uploader/index.js
index 4f38acb43..1ede615a5 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -308,14 +308,15 @@ export default createComponent({
const showDelete = item.status !== 'uploading' && this.deletable;
const DeleteIcon = showDelete && (
- {
event.stopPropagation();
this.onDelete(item, index);
}}
- />
+ >
+
+
);
const PreviewCoverContent = this.slots('preview-cover', item);
diff --git a/src/uploader/index.less b/src/uploader/index.less
index bffa9589d..cd8922065 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -74,12 +74,22 @@
&-delete {
position: absolute;
- top: -8px;
- right: -8px;
- color: @uploader-delete-color;
- font-size: @uploader-delete-icon-size;
+ top: 0;
+ right: 0;
+ width: @uploader-delete-icon-size;
+ height: @uploader-delete-icon-size;
background-color: @uploader-delete-background-color;
- border-radius: 100%;
+ border-radius: 0 0 0 12px;
+
+ &-icon {
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ color: #fff;
+ color: @uploader-delete-color;
+ font-size: 16px;
+ transform: scale(0.5);
+ }
}
&-cover {
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
index b9933f7e4..9ada94279 100644
--- a/src/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -17,15 +17,17 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
+
-
-
+
+
+
@@ -53,8 +55,9 @@ exports[`renders demo correctly 1`] = `
-
+
+
+
@@ -68,8 +71,9 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
+
@@ -83,8 +87,9 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
+
@@ -113,8 +118,9 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
+
diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap
index 60e2160f8..978aeb5aa 100644
--- a/src/uploader/test/__snapshots__/index.spec.js.snap
+++ b/src/uploader/test/__snapshots__/index.spec.js.snap
@@ -44,8 +44,9 @@ exports[`image-fit prop 1`] = `
-
-
+
+
+
@@ -60,8 +61,9 @@ exports[`max-count prop 1`] = `
-
-
+
+
+
@@ -75,16 +77,18 @@ exports[`preview-cover slot 1`] = `
https://img.yzcdn.cn/vant/cat.jpeg
-
-
+
+
+
https://img.yzcdn.cn/vant/cat.jpeg
-
-
+
+
+
@@ -99,8 +103,9 @@ exports[`preview-size prop 1`] = `
-
-
+
+
+
@@ -115,29 +120,33 @@ exports[`render preview image 1`] = `
-
-
+
+
+
https://img.yzcdn.cn/vant/test.pdf
-
-
+
+
+
+
+
-
-
+
+
+