alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(Image): add @image-loading-icon-size、@image-error-icon-size var

Browse Source
This commit is contained in:
陈嘉涵
2019-12-29 08:35:57 +08:00
committed by neverland
parent dd8559a2aa
commit d7ae8c5a26
10 changed files with 60 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/image/index.js
+17 -4
View File
@@ -108,7 +108,9 @@ export default createComponent({
if (this.loading && this.showLoading) {
return (
<div class={bem('loading')}>
{this.slots('loading') || <Icon name="photo-o" size="22" />}
{this.slots('loading') || (
<Icon name="photo-o" class={bem('loading-icon')} />
)}
</div>
);
}
@@ -116,7 +118,9 @@ export default createComponent({
if (this.error && this.showError) {
return (
<div class={bem('error')}>
{this.slots('error') || <Icon name="warning-o" size="22" />}
{this.slots('error') || (
<Icon name="warning-o" class={bem('error-icon')} />
)}
</div>
);
}
@@ -142,14 +146,23 @@ export default createComponent({
}
return (
<img src={this.src} onLoad={this.onLoad} onError={this.onError} {...imgData} />
<img
src={this.src}
onLoad={this.onLoad}
onError={this.onError}
{...imgData}
/>
);
}
},
render() {
return (
<div class={bem({ round: this.round })} style={this.style} onClick={this.onClick}>
<div
class={bem({ round: this.round })}
style={this.style}
onClick={this.onClick}
>
{this.genImage()}
{this.genPlaceholder()}
</div>
src/image/index.less
+8
View File
@@ -34,4 +34,12 @@
font-size: @image-placeholder-font-size;
background-color: @image-placeholder-background-color;
}
&__loading-icon {
font-size: @image-loading-icon-size;
}
&__error-icon {
font-size: @image-error-icon-size;
}
}
src/image/test/__snapshots__/demo.spec.js.snap
+14 -14
View File
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-row">
<div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
</div>
@@ -14,35 +14,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">scale-down</div>
@@ -53,35 +53,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">scale-down</div>
@@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
@@ -111,14 +111,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">自定义提示</div>
src/image/test/__snapshots__/index.spec.js.snap
+4 -4
View File
@@ -2,14 +2,14 @@
exports[`lazy load 1`] = `
<div class="van-image"><img class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`lazy-load error event 1`] = `
<div class="van-image">
<div class="van-image__error"><i class="van-icon van-icon-warning-o" style="font-size: 22px;">
<div class="van-image__error"><i class="van-icon van-icon-warning-o van-image__error-icon">
<!----></i></div>
</div>
`;
@@ -20,14 +20,14 @@ exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn
exports[`load event 2`] = `
<div class="van-image"><img src="" class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`radius prop 1`] = `
<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<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 van-image__loading-icon">
<!----></i></div>
</div>
`;