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: update upload area style

Browse Source
This commit is contained in:
chenjiahan 2020-02-29 10:45:28 +08:00
parent a2911289fd
commit bd4e64190e
6 changed files with 21 additions and 18 deletions
src
form/test/__snapshots__
demo.spec.js.snap
style
var.less
uploader
index.jsindex.less
test/__snapshots__
demo.spec.js.snapindex.spec.js.snap

2
src/form/test/__snapshots__/demo.spec.js.snap

@ -176,7 +176,7 @@ exports[`renders demo correctly 1`] = `
</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">
<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>
</div>
</div>

6
src/style/var.less

@ -773,12 +773,12 @@
// Uploader
@uploader-size: 80px;
@uploader-icon-size: 24px;
@uploader-icon-color: @gray-6;
@uploader-icon-color: @gray-4;
@uploader-text-color: @gray-6;
@uploader-text-font-size: @font-size-sm;
@uploader-upload-border-color: @gray-3;
@uploader-upload-border-radius: 4px;
@uploader-upload-background-color: @white;
@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;

2
src/uploader/index.js

@ -357,7 +357,7 @@ export default createComponent({
return (
<div class={bem('upload')} style={style}>
<Icon name="plus" class={bem('upload-icon')} />
<Icon name="photograph" class={bem('upload-icon')} />
{this.uploadText && (
<span class={bem('upload-text')}>{this.uploadText}</span>
)}

5
src/uploader/index.less

@ -43,9 +43,12 @@
height: @uploader-size;
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;
&:active {
background-color: @uploader-upload-active-color;
}
&-icon {
color: @uploader-icon-color;
font-size: @uploader-icon-size;

12
src/uploader/test/__snapshots__/demo.spec.js.snap

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<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">
<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>
</div>
</div>
@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
</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">
<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>
</div>
</div>
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-uploader">
<div class="van-uploader__wrapper van-uploader__wrapper--disabled">
<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-photograph van-uploader__upload-icon">
<!----></i><input type="file" accept="image/*" disabled="disabled" class="van-uploader__input"></div>
</div>
</div>
@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
</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">
<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>
</div>
</div>
@ -79,7 +79,7 @@ exports[`renders demo correctly 1`] = `
</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">
<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>
</div>
</div>
@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
<div>
<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">
<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>
</div>
</div>

12
src/uploader/test/__snapshots__/index.spec.js.snap

@ -3,7 +3,7 @@
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">
<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>
</div>
</div>
@ -12,7 +12,7 @@ exports[`delete preview image 1`] = `
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">
<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>
</div>
</div>
@ -28,7 +28,7 @@ exports[`image-fit prop 1`] = `
</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">
<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>
</div>
</div>
@ -58,7 +58,7 @@ exports[`preview-size prop 1`] = `
</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">
<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>
</div>
</div>
@ -95,7 +95,7 @@ exports[`render preview image 1`] = `
</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">
<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>
</div>
</div>
@ -104,7 +104,7 @@ exports[`render preview image 1`] = `
exports[`render upload-text 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">
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
<!----></i><span class="van-uploader__upload-text">Text</span><input type="file" accept="image/*" class="van-uploader__input"></div>
</div>
</div>