blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Uploader): add click-upload event (#9119)

Browse Source
This commit is contained in:
neverland 2021-07-26 16:19:16 +08:00 committed by GitHub
parent 728e28f80c
commit 354ab2db82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/uploader/README.md
View File

@ -322,6 +322,7 @@ export default {
| Event | Description | Arguments | | Event | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
| oversize | Emitted when file size over limit | Same as after-read | | oversize | Emitted when file size over limit | Same as after-read |
| click-upload `v3.1.5` | Emitted when click upload area | _event: MouseEvent_ |
| click-preview | Emitted when preview image is clicked | Same as after-read | | click-preview | Emitted when preview image is clicked | Same as after-read |
| close-preview | Emitted when the full screen image preview is closed | - | | close-preview | Emitted when the full screen image preview is closed | - |
| delete | Emitted when preview file is deleted | Same as after-read | | delete | Emitted when preview file is deleted | Same as after-read |

13
src/uploader/README.zh-CN.md
View File

@ -340,12 +340,13 @@ export default {
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| ------------- | ---------------------- | --------------- | | --------------------- | ---------------------- | ------------------- |
| oversize | 文件大小超过限制时触发 | 同 `after-read` | | oversize | 文件大小超过限制时触发 | 同 `after-read` |
| click-preview | 点击预览图时触发 | 同 `after-read` | | click-upload `v3.1.5` | 点击上传区域时触发 | _event: MouseEvent_ |
| close-preview | 关闭全屏图片预览时触发 | - | | click-preview | 点击预览图时触发 | 同 `after-read` |
| delete | 删除文件预览时触发 | 同 `after-read` | | close-preview | 关闭全屏图片预览时触发 | - |
| delete | 删除文件预览时触发 | 同 `after-read` |
### Slots ### Slots

6
src/uploader/Uploader.tsx
View File

@ -109,6 +109,7 @@ export default defineComponent({
emits: [ emits: [
'delete', 'delete',
'oversize', 'oversize',
'click-upload',
'close-preview', 'close-preview',
'click-preview', 'click-preview',
'update:modelValue', 'update:modelValue',
@ -307,6 +308,8 @@ export default defineComponent({
} }
}; };
const onClickUpload = (event: MouseEvent) => emit('click-upload', event);
const renderUpload = () => { const renderUpload = () => {
if (props.modelValue.length >= props.maxCount || !props.showUpload) { if (props.modelValue.length >= props.maxCount || !props.showUpload) {
return; return;
@ -327,7 +330,7 @@ export default defineComponent({
if (slots.default) { if (slots.default) {
return ( return (
<div class={bem('input-wrapper')}> <div class={bem('input-wrapper')} onClick={onClickUpload}>
{slots.default()} {slots.default()}
{Input} {Input}
</div> </div>
@ -338,6 +341,7 @@ export default defineComponent({
<div <div
class={bem('upload', { readonly: props.readonly })} class={bem('upload', { readonly: props.readonly })}
style={getSizeStyle(props.previewSize)} style={getSizeStyle(props.previewSize)}
onClick={onClickUpload}
> >
<Icon name={props.uploadIcon} class={bem('upload-icon')} /> <Icon name={props.uploadIcon} class={bem('upload-icon')} />
{props.uploadText && ( {props.uploadText && (

6
src/uploader/test/index.spec.ts
View File

@ -619,3 +619,9 @@ test('should not render upload input when using readonly prop', async () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('should emit click-upload event when upload area is clicked', async () => {
const wrapper = mount(Uploader);
wrapper.find('.van-uploader__upload').trigger('click');
expect(wrapper.emitted('click-upload')).toBeTruthy();
});