[new feature] Uploader: support delete preview image

packages/style/var.less

@@ -581,3 +581,5 @@
 @uploader-text-font-size: 12px;
 @uploader-upload-border-color: @gray-light;
 @uploader-upload-background-color: @white;
+@uploader-delete-color: @white;
+@uploader-delete-background-color: rgba(0, 0, 0, .45);

packages/uploader/en-US.md

@@ -95,6 +95,7 @@ export default {
 | Event | Description | Arguments |
 |------|------|------|
 | oversize | Triggered when file size over limit | Same as after-read |
+| delete | Triggered when delete preview file | file |
 
 ### Slots
 

packages/uploader/index.js

@@ -102,6 +102,14 @@ export default sfc({
       }
     },
 
+    onDelete(file, index) {
+      const fileList = this.fileList.slice(0);
+      fileList.splice(index, 1);
+
+      this.$emit('input', fileList);
+      this.$emit('delete', file);
+    },
+
     resetInput() {
       /* istanbul ignore else */
       if (this.$refs.input) {
@@ -114,14 +122,23 @@ export default sfc({
         return;
       }
 
-      return this.fileList.map(file => (
+      return this.fileList.map((file, index) => (
-        <Image
+        <div class={bem('preview')}>
-          fit="cover"
+          <Image
-          class={bem('preview')}
+            fit="cover"
-          src={file.content}
+            src={file.content}
-          width={this.previewSize}
+            class={bem('preview-image')}
-          height={this.previewSize}
+            width={this.previewSize}
-        />
+            height={this.previewSize}
+          />
+          <Icon
+            name="delete"
+            class={bem('preview-delete')}
+            onClick={() => {
+              this.onDelete(file, index);
+            }}
+          />
+        </div>
       ));
     },
 

packages/uploader/index.less

@@ -50,8 +50,22 @@
   }
 
   &__preview {
-    width: @uploader-size;
+    position: relative;
-    height: @uploader-size;
     margin: 0 10px 10px 0;
+
+    &-image {
+      display: block;
+      width: @uploader-size;
+      height: @uploader-size;
+    }
+
+    &-delete {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      padding: 1px;
+      color: @uploader-delete-color;
+      background-color: @uploader-delete-background-color;
+    }
   }
 }

packages/uploader/test/__snapshots__/index.spec.js.snap

@@ -1,11 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`delete preview image 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+  </div>
+</div>
+`;
+
+exports[`disable preview image 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+  </div>
+</div>
+`;
+
 exports[`max-count prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
-    <div class="van-image van-uploader__preview"><img src="test" class="van-image__img" style="object-fit: cover;">
+    <div class="van-uploader__preview">
-      <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+      <div class="van-image van-uploader__preview-image"><img src="test" class="van-image__img" style="object-fit: cover;">
-          <!----></i></div>
+        <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+            <!----></i></div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
     </div>
   </div>
 </div>
@@ -14,9 +35,12 @@ exports[`max-count prop 1`] = `
 exports[`preview-size prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
-    <div class="van-image van-uploader__preview" style="width: 30px; height: 30px;"><img src="test" class="van-image__img" style="object-fit: cover;">
+    <div class="van-uploader__preview" style="">
-      <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+      <div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="test" class="van-image__img" style="object-fit: cover;">
-          <!----></i></div>
+        <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+            <!----></i></div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
     </div>
     <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@@ -27,9 +51,12 @@ exports[`preview-size prop 1`] = `
 exports[`render preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
-    <div class="van-image van-uploader__preview"><img src="test" class="van-image__img" style="object-fit: cover;">
+    <div class="van-uploader__preview">
-      <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+      <div class="van-image van-uploader__preview-image"><img src="test" class="van-image__img" style="object-fit: cover;">
-          <!----></i></div>
+        <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+            <!----></i></div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
     </div>
     <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>

packages/uploader/test/index.spec.js

@@ -142,6 +142,25 @@ it('render preview image', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it('disable preview image', async () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      fileList: [],
+      previewImage: false
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      }
+    }
+  });
+
+  wrapper.vm.onChange(file);
+  await later();
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 it('max-count prop', async () => {
   const wrapper = mount(Uploader, {
     propsData: {
@@ -179,3 +198,26 @@ it('preview-size prop', async () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+it('delete preview image', async () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      fileList: [],
+      previewSize: 30
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      }
+    }
+  });
+
+  wrapper.vm.onChange(file);
+  await later();
+
+  wrapper.find('.van-uploader__preview-delete').trigger('click');
+  expect(wrapper.vm.fileList.length).toEqual(0);
+
+  expect(wrapper).toMatchSnapshot();
+  expect(wrapper.emitted('delete')[0]).toBeTruthy();
+});

packages/uploader/zh-CN.md

@@ -104,6 +104,7 @@ export default {
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | oversize | 文件大小超过限制时触发 | 同`after-read` |
+| delete | 删除文件预览时触发 | file: 被删除的文件对象 |
 
 ### Slots