feat(Uploader): add border-radius (#4709)

This commit is contained in:
neverland 2019-10-14 11:54:24 +08:00 committed by GitHub
parent 6b23b2c4b8
commit bed2ca5063
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 6 deletions

View File

@ -682,6 +682,7 @@
@uploader-text-color: @gray-dark;
@uploader-text-font-size: @font-size-sm;
@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);

View File

@ -226,6 +226,7 @@ export default createComponent({
class={bem('preview-image')}
width={this.previewSize}
height={this.previewSize}
radius={4}
onClick={() => {
this.onPreviewImage(item);
}}

View File

@ -36,6 +36,7 @@
margin: 0 @padding-xs @padding-xs 0;
background-color: @uploader-upload-background-color;
border: 1px dashed @uploader-upload-border-color;
border-radius: @uploader-upload-border-radius;
&-icon {
color: @uploader-icon-color;

View File

@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<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 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">

View File

@ -22,7 +22,7 @@ exports[`image-fit prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<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: 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;">
<!----></i></div>
</div><i class="van-icon van-icon-delete van-uploader__preview-delete">
@ -38,7 +38,7 @@ exports[`max-count prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<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 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">
@ -52,7 +52,7 @@ exports[`preview-size prop 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview" style="">
<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 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">
@ -68,7 +68,7 @@ exports[`render preview image 1`] = `
<div class="van-uploader">
<div class="van-uploader__wrapper">
<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 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">
@ -89,7 +89,7 @@ exports[`render preview image 1`] = `
<!----></i>
</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 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">