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): update delete icon style (#4712)

Browse Source
This commit is contained in:
neverland 2019-10-14 13:58:42 +08:00 committed by GitHub
parent bed2ca5063
commit aeee6b97d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/style/var.less
View File

@ -684,8 +684,9 @@
@uploader-upload-border-color: @gray-light; @uploader-upload-border-color: @gray-light;
@uploader-upload-border-radius: 4px; @uploader-upload-border-radius: 4px;
@uploader-upload-background-color: @white; @uploader-upload-background-color: @white;
@uploader-delete-color: @white; @uploader-delete-color: @gray-dark;
@uploader-delete-background-color: rgba(0, 0, 0, .45); @uploader-delete-icon-size: 18px;
@uploader-delete-background-color: @white;
@uploader-file-background-color: @background-color; @uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px; @uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-darker; @uploader-file-icon-color: @gray-darker;

2
src/uploader/index.js
View File

@ -210,7 +210,7 @@ export default createComponent({
renderPreviewItem(item, index) { renderPreviewItem(item, index) {
const DeleteIcon = ( const DeleteIcon = (
<Icon <Icon
name="delete" name="clear"
class={bem('preview-delete')} class={bem('preview-delete')}
onClick={event => { onClick={event => {
event.stopPropagation(); event.stopPropagation();

7
src/uploader/index.less
View File

@ -62,11 +62,12 @@
&-delete { &-delete {
position: absolute; position: absolute;
right: 0; top: -8px;
bottom: 0; right: -8px;
padding: 1px;
color: @uploader-delete-color; color: @uploader-delete-color;
font-size: @uploader-delete-icon-size;
background-color: @uploader-delete-background-color; background-color: @uploader-delete-background-color;
border-radius: 100%;
} }
} }

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

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;"> <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><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" style="font-size: 22px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon"> <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">

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

@ -25,7 +25,7 @@ exports[`image-fit prop 1`] = `
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;"> <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><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" style="font-size: 22px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon"> <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
@ -41,7 +41,7 @@ exports[`max-count prop 1`] = `
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;"> <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><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" style="font-size: 22px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
</div> </div>
@ -55,7 +55,7 @@ exports[`preview-size prop 1`] = `
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px; overflow: hidden; border-radius: 4px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;"> <div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px; overflow: hidden; border-radius: 4px;"><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" style="font-size: 22px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon"> <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
@ -71,28 +71,28 @@ exports[`render preview image 1`] = `
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;"> <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><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" style="font-size: 22px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__preview"> <div class="van-uploader__preview">
<div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon"> <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
<!----></i> <!----></i>
<div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div> <div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__preview"> <div class="van-uploader__preview">
<div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon"> <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
<!----></i> <!----></i>
<div class="van-uploader__file-name van-ellipsis">test.pdf</div> <div class="van-uploader__file-name van-ellipsis">test.pdf</div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__preview"> <div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;"> <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><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" style="font-size: 22px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete"> </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i> <!----></i>
</div> </div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon"> <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">