mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Uploader): add index param (#4460)
This commit is contained in:
parent
3c761cec1e
commit
d4335d26af
@ -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* |
|
||||||
|
@ -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* |
|
||||||
|
@ -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}
|
||||||
|
@ -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 () => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user