ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-15 23:55:08 +00:00
Code Issues Actions 3 Packages 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
5 changed files with 16 additions and 14 deletions
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-radius: 4px;
@uploader-upload-background-color: @white;
@uploader-delete-color: @white;
@uploader-delete-background-color: rgba(0, 0, 0, .45);
@uploader-delete-color: @gray-dark;
@uploader-delete-icon-size: 18px;
@uploader-delete-background-color: @white;
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-darker;

2
src/uploader/index.js
View File

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

7
src/uploader/index.less
View File

@@ -62,11 +62,12 @@
&-delete {
position: absolute;
right: 0;
bottom: 0;
padding: 1px;
top: -8px;
right: -8px;
color: @uploader-delete-color;
font-size: @uploader-delete-icon-size;
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__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">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<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__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">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<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__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">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</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__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">
</div><i class="van-icon van-icon-clear 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">
@@ -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__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">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</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-delete van-uploader__preview-delete">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</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-delete van-uploader__preview-delete">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<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__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">
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">