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

style(Uploader): update delete icon style (#6750)

Browse Source 
* style(Uploader): remove round border radius

* style(Uploader): update delete icon style

* fix: snapshot
This commit is contained in:
neverland 2020-07-11 10:57:04 +08:00 committed by GitHub
parent 060b1fb717
commit 7b21a23cae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -177,8 +177,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>

6
src/style/var.less
View File

@ -815,9 +815,9 @@
@uploader-text-font-size: @font-size-sm;
@uploader-upload-background-color: @gray-1;
@uploader-upload-active-color: @active-color;
@uploader-delete-color: @gray-6;
@uploader-delete-icon-size: 18px;
@uploader-delete-background-color: @white;
@uploader-delete-color: @white;
@uploader-delete-icon-size: 14px;
@uploader-delete-background-color: rgba(0, 0, 0, 0.7);
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-7;

7
src/uploader/index.js
View File

@ -308,14 +308,15 @@ export default createComponent({
const showDelete = item.status !== 'uploading' && this.deletable;
const DeleteIcon = showDelete && (
<Icon
name="clear"
<div
class={bem('preview-delete')}
onClick={(event) => {
event.stopPropagation();
this.onDelete(item, index);
}}
/>
>
<Icon name="cross" class={bem('preview-delete-icon')} />
</div>
);
const PreviewCoverContent = this.slots('preview-cover', item);

20
src/uploader/index.less
View File

@ -74,12 +74,22 @@
&-delete {
position: absolute;
top: -8px;
right: -8px;
color: @uploader-delete-color;
font-size: @uploader-delete-icon-size;
top: 0;
right: 0;
width: @uploader-delete-icon-size;
height: @uploader-delete-icon-size;
background-color: @uploader-delete-background-color;
border-radius: 100%;
border-radius: 0 0 0 12px;
&-icon {
position: absolute;
top: -2px;
right: -2px;
color: #fff;
color: @uploader-delete-color;
font-size: 16px;
transform: scale(0.5);
}
}
&-cover {

30
src/uploader/test/__snapshots__/demo.spec.js.snap
View File

@ -17,15 +17,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="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://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
@ -53,8 +55,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__mask"><i class="van-icon van-icon-close van-uploader__mask-icon">
<!----></i>
<div class="van-uploader__mask-message">上传失败</div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -68,8 +71,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
@ -83,8 +87,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
@ -113,8 +118,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__preview-cover">
<div class="preview-cover van-ellipsis">图片名称</div>
</div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>

45
src/uploader/test/__snapshots__/index.spec.js.snap
View File

@ -44,8 +44,9 @@ exports[`image-fit prop 1`] = `
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -60,8 +61,9 @@ exports[`max-count prop 1`] = `
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
</div>
</div>
@ -75,16 +77,18 @@ exports[`preview-cover slot 1`] = `
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
<div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="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://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
<div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -99,8 +103,9 @@ exports[`preview-size prop 1`] = `
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -115,29 +120,33 @@ exports[`render preview image 1`] = `
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview">
<div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
<!----></i>
<div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview">
<div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
<!----></i>
<div class="van-uploader__file-name van-ellipsis">test.pdf</div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="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="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
<!----></i></div>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>