blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-20 21:39:15 +08:00
Code Issues Projects Releases Wiki Activity

feat(Uploader): add preview-delete slot (#10606)

Browse Source
This commit is contained in:
neverland 2022-05-14 10:58:57 +08:00 committed by GitHub
parent 0a114228a8
commit 726f98027a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 70 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -460,7 +460,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>

3
packages/vant/src/uploader/README.md
View File

@ -344,7 +344,8 @@ export default {
| Name | Description | SlotProps |
| --- | --- | --- |
| default | Custom icon | - |
| default | Custom upload area | - |
| preview-delete `v.3.5.0` | Custom delete icon | `item: FileListItem` |
| preview-cover | Custom content that covers the image preview | `item: FileListItem` |
### Parameters of before-read、after-read、before-delete

7
packages/vant/src/uploader/README.zh-CN.md
View File

@ -363,9 +363,10 @@ export default {
### Slots
| 名称 | 说明 | 参数 |
| ------------- | ------------------------------ | -------------------- |
| default | 自定义上传区域 | - |
| 名称 | 说明 | 参数 |
| --- | --- | --- |
| default | 自定义上传区域 | - |
| preview-delete `v3.5.0` | 自定义删除按钮 | - |
| preview-cover | 自定义覆盖在预览区域上方的内容 | _item: FileListItem_ |
### 回调参数

2
packages/vant/src/uploader/Uploader.tsx
View File

@ -280,7 +280,7 @@ export default defineComponent({
return (
<UploaderPreviewItem
v-slots={{ 'preview-cover': slots['preview-cover'] }}
v-slots={pick(slots, ['preview-cover', 'preview-delete'])}
item={item}
index={index}
onClick={() => emit('click-preview', item, getDetail(index))}

9
packages/vant/src/uploader/UploaderPreviewItem.tsx
View File

@ -73,15 +73,20 @@ export default defineComponent({
const renderDeleteIcon = () => {
if (props.deletable && props.item.status !== 'uploading') {
const slot = slots['preview-delete'];
return (
<div
role="button"
class={bem('preview-delete')}
class={bem('preview-delete', { shadow: !slot })}
tabindex={0}
aria-label={t('delete')}
onClick={onDelete}
>
<Icon name="cross" class={bem('preview-delete-icon')} />
{slot ? (
slot()
) : (
<Icon name="cross" class={bem('preview-delete-icon')} />
)}
</div>
);
}

11
packages/vant/src/uploader/index.less
View File

@ -108,10 +108,13 @@
position: absolute;
top: 0;
right: 0;
width: var(--van-uploader-delete-icon-size);
height: var(--van-uploader-delete-icon-size);
background: var(--van-uploader-delete-background-color);
border-radius: 0 0 0 12px;
&--shadow {
width: var(--van-uploader-delete-icon-size);
height: var(--van-uploader-delete-icon-size);
background: var(--van-uploader-delete-background-color);
border-radius: 0 0 0 12px;
}
&-icon {
position: absolute;

16
packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
View File

@ -30,7 +30,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -50,7 +50,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -126,7 +126,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -160,7 +160,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -195,7 +195,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -258,7 +258,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -294,7 +294,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -359,7 +359,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>

89
packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap
View File

@ -17,7 +17,7 @@ exports[`delete preview image 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -66,7 +66,7 @@ exports[`disable preview image 2`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -116,68 +116,7 @@ exports[`image-fit prop 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
</div>
<div class="van-uploader__upload">
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
</i>
<input type="file"
class="van-uploader__input"
accept="image/*"
>
</div>
</div>
</div>
`;
exports[`preview-cover slot 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image">
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
class="van-image__img"
style="object-fit: cover;"
>
<div class="van-image__loading">
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
</i>
</div>
<div class="van-uploader__preview-cover">
Custom Preview Cover
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
</div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image">
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
class="van-image__img"
style="object-fit: cover;"
>
<div class="van-image__loading">
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
</i>
</div>
<div class="van-uploader__preview-cover">
Custom Preview Cover
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -212,7 +151,7 @@ exports[`render preview image 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -229,7 +168,7 @@ exports[`render preview image 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -246,7 +185,7 @@ exports[`render preview image 1`] = `
</div>
</div>
<div role="button"
class="van-uploader__preview-delete"
class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
tabindex="0"
aria-label="Delete"
>
@ -277,6 +216,22 @@ exports[`should not render upload input when using readonly prop 1`] = `
</div>
`;
exports[`should render preview-cover slot correctly 1`] = `
<div class="van-uploader__preview-cover">
Custom Preview Cover
</div>
`;
exports[`should render preview-delete slot correctly 1`] = `
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
Custom Preview Delete
</div>
`;
exports[`upload-icon prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">

21
packages/vant/src/uploader/test/index.spec.ts
View File

@ -627,17 +627,32 @@ test('multiFile upload filter max-size file', async () => {
expect(wrapper.emitted<[File]>('oversize')![0]).toBeTruthy();
});
test('preview-cover slot', async () => {
test('should render preview-cover slot correctly', async () => {
const wrapper = mount(Uploader, {
props: {
modelValue: [{ url: IMAGE }, { url: IMAGE }],
modelValue: [{ url: IMAGE }],
},
slots: {
'preview-cover': 'Custom Preview Cover',
},
});
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find('.van-uploader__preview-cover').html()).toMatchSnapshot();
});
test('should render preview-delete slot correctly', async () => {
const wrapper = mount(Uploader, {
props: {
modelValue: [{ url: IMAGE }],
},
slots: {
'preview-delete': 'Custom Preview Delete',
},
});
expect(
wrapper.find('.van-uploader__preview-delete').html()
).toMatchSnapshot();
});
test('should not render upload input when using readonly prop', async () => {