alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] Uploader: support delete preview image

Browse Source
This commit is contained in:
陈嘉涵
2019-06-11 20:07:10 +08:00
parent 46983d8376
commit eb311d80d9
7 changed files with 123 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/uploader/test/__snapshots__/index.spec.js.snap
+36 -9
View File
@@ -1,11 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`delete preview image 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
</div>
</div>
`;
exports[`disable preview image 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
</div>
</div>
`;
exports[`max-count prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-image van-uploader__preview"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
<!----></i>
</div>
</div>
</div>
@@ -14,9 +35,12 @@ exports[`max-count prop 1`] = `
exports[`preview-size prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-image van-uploader__preview" style="width: 30px; height: 30px;"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
<div class="van-uploader__preview" style="">
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@@ -27,9 +51,12 @@ exports[`preview-size prop 1`] = `
exports[`render preview image 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-image van-uploader__preview"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
packages/uploader/test/index.spec.js
+42
View File
@@ -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();
});