feat(Uploader): add index param (#4460)

This commit is contained in:
neverland 2019-09-16 20:07:48 +08:00 committed by GitHub
parent 3c761cec1e
commit d4335d26af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 21 deletions

View File

@ -135,7 +135,7 @@ export default {
| oversize | Triggered when file size over limit | Same as after-read | | oversize | Triggered when file size over limit | Same as after-read |
| click-preview | Triggered when click preview image | Same as after-read | | click-preview | Triggered when click preview image | Same as after-read |
| close-preview | Triggered when close full screen image preview | - | | close-preview | Triggered when close full screen image preview | - |
| delete | Triggered when delete preview file | file | | delete | Triggered when delete preview file | Same as after-read |
### Slots ### Slots
@ -148,4 +148,4 @@ export default {
| Attribute | Description | Type | | Attribute | Description | Type |
|------|------|------| |------|------|------|
| file | File object | *object* | | file | File object | *object* |
| detail | Detail info | *object* | | detail | Detail info, contains name and index | *object* |

View File

@ -151,7 +151,7 @@ export default {
| oversize | 文件大小超过限制时触发 | 同`after-read` | | oversize | 文件大小超过限制时触发 | 同`after-read` |
| click-preview | 点击预览图时触发 | 同`after-read` | | click-preview | 点击预览图时触发 | 同`after-read` |
| close-preview | 关闭全屏图片预览时触发 | - | | close-preview | 关闭全屏图片预览时触发 | - |
| delete | 删除文件预览时触发 | file: 被删除的文件对象 | | delete | 删除文件预览时触发 | `after-read` |
### Slots ### Slots
@ -166,4 +166,4 @@ before-read、after-read、before-delete 执行时会传递以下回调参数:
| 参数名 | 说明 | 类型 | | 参数名 | 说明 | 类型 |
|------|------|------| |------|------|------|
| file | 文件解析后的 file 对象 | *object* | | file | 文件解析后的 file 对象 | *object* |
| detail | 额外信息,包含 name 字段 | *object* | | detail | 额外信息,包含 name 和 index 字段 | *object* |

View File

@ -59,18 +59,19 @@ export default createComponent({
}, },
computed: { computed: {
detail() {
return {
name: this.name
};
},
previewSizeWithUnit() { previewSizeWithUnit() {
return addUnit(this.previewSize); return addUnit(this.previewSize);
} }
}, },
methods: { methods: {
getDetail(index = this.fileList.length) {
return {
name: this.name,
index
};
},
onChange(event) { onChange(event) {
let { files } = event.target; let { files } = event.target;
@ -81,7 +82,7 @@ export default createComponent({
files = files.length === 1 ? files[0] : [].slice.call(files); files = files.length === 1 ? files[0] : [].slice.call(files);
if (this.beforeRead) { if (this.beforeRead) {
const response = this.beforeRead(files, this.detail); const response = this.beforeRead(files, this.getDetail());
if (!response) { if (!response) {
this.resetInput(); this.resetInput();
@ -129,7 +130,7 @@ export default createComponent({
onAfterRead(files, oversize) { onAfterRead(files, oversize) {
if (oversize) { if (oversize) {
this.$emit('oversize', files, this.detail); this.$emit('oversize', files, this.getDetail());
return; return;
} }
@ -137,13 +138,13 @@ export default createComponent({
this.$emit('input', [...this.fileList, ...toArray(files)]); this.$emit('input', [...this.fileList, ...toArray(files)]);
if (this.afterRead) { if (this.afterRead) {
this.afterRead(files, this.detail); this.afterRead(files, this.getDetail());
} }
}, },
onDelete(file, index) { onDelete(file, index) {
if (this.beforeDelete) { if (this.beforeDelete) {
const response = this.beforeDelete(file, this.detail); const response = this.beforeDelete(file, this.getDetail(index));
if (!response) { if (!response) {
return; return;
@ -167,7 +168,7 @@ export default createComponent({
fileList.splice(index, 1); fileList.splice(index, 1);
this.$emit('input', fileList); this.$emit('input', fileList);
this.$emit('delete', file); this.$emit('delete', file, this.getDetail(index));
}, },
resetInput() { resetInput() {
@ -196,10 +197,6 @@ export default createComponent({
}); });
}, },
onClickPreview(file) {
this.$emit('click-preview', file, this.detail);
},
renderPreviewItem(item, index) { renderPreviewItem(item, index) {
const DeleteIcon = ( const DeleteIcon = (
<Icon <Icon
@ -242,7 +239,7 @@ export default createComponent({
<div <div
class={bem('preview')} class={bem('preview')}
onClick={() => { onClick={() => {
this.onClickPreview(item); this.$emit('click-preview', item, this.getDetail(index));
}} }}
> >
{Preview} {Preview}

View File

@ -354,7 +354,7 @@ it('click-preview event', () => {
wrapper.find('.van-image').trigger('click'); wrapper.find('.van-image').trigger('click');
expect(wrapper.emitted('click-preview')[0][0]).toEqual({ url: IMAGE }); expect(wrapper.emitted('click-preview')[0][0]).toEqual({ url: IMAGE });
expect(wrapper.emitted('click-preview')[0][1]).toEqual({ name: '' }); expect(wrapper.emitted('click-preview')[0][1]).toEqual({ name: '', index: 0 });
}); });
it('close-preview event', async () => { it('close-preview event', async () => {