diff --git a/packages/style/var.less b/packages/style/var.less index 9e8b78e9d..0591508f9 100644 --- a/packages/style/var.less +++ b/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); diff --git a/packages/uploader/en-US.md b/packages/uploader/en-US.md index 01474ff7e..4582b50ff 100644 --- a/packages/uploader/en-US.md +++ b/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 diff --git a/packages/uploader/index.js b/packages/uploader/index.js index 11fd74d56..534ab8a48 100644 --- a/packages/uploader/index.js +++ b/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) => ( +
+ + { + this.onDelete(file, index); + }} + /> +
)); }, diff --git a/packages/uploader/index.less b/packages/uploader/index.less index 14140fc9f..541abe2c2 100644 --- a/packages/uploader/index.less +++ b/packages/uploader/index.less @@ -50,8 +50,22 @@ } &__preview { - width: @uploader-size; - height: @uploader-size; + position: relative; 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; + } } } diff --git a/packages/uploader/test/__snapshots__/index.spec.js.snap b/packages/uploader/test/__snapshots__/index.spec.js.snap index fcd8c8eff..6c96128da 100644 --- a/packages/uploader/test/__snapshots__/index.spec.js.snap +++ b/packages/uploader/test/__snapshots__/index.spec.js.snap @@ -1,11 +1,32 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`delete preview image 1`] = ` +
+
+
+
+
+
+`; + +exports[`disable preview image 1`] = ` +
+
+
+
+
+
+`; + exports[`max-count prop 1`] = `
-
-
-
+
+
+
+
+
+
@@ -14,9 +35,12 @@ exports[`max-count prop 1`] = ` exports[`preview-size prop 1`] = `
-
-
-
+
+
+
+
+
+
@@ -27,9 +51,12 @@ exports[`preview-size prop 1`] = ` exports[`render preview image 1`] = `
-
-
-
+
+
+
+
+
+
diff --git a/packages/uploader/test/index.spec.js b/packages/uploader/test/index.spec.js index 3826bd2af..7f03830ce 100644 --- a/packages/uploader/test/index.spec.js +++ b/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(); +}); diff --git a/packages/uploader/zh-CN.md b/packages/uploader/zh-CN.md index caafc6c9d..80b04fd47 100644 --- a/packages/uploader/zh-CN.md +++ b/packages/uploader/zh-CN.md @@ -104,6 +104,7 @@ export default { | 事件名 | 说明 | 回调参数 | |------|------|------| | oversize | 文件大小超过限制时触发 | 同`after-read` | +| delete | 删除文件预览时触发 | file: 被删除的文件对象 | ### Slots