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

style(Image): update loading icon and error icon (#6890)

Browse Source
This commit is contained in:
neverland
2020-07-29 09:36:15 +08:00
committed by GitHub
parent 01d1f05e15
commit 378009fefa
13 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/image/README.md
+2 -2
View File
@@ -75,8 +75,8 @@ Vue.use(Lazyload);
| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
| show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` |
| show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` |
| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` |
| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` |
| error-icon `v2.4.2` | Error icon | _string_ | `photo-fail` |
| loading-icon `v2.4.2` | Loading icon | _string_ | `photo` |
### fit optional value
src/image/README.zh-CN.md
+2 -2
View File
@@ -107,8 +107,8 @@ Vue.use(Lazyload);
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
| show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` |
| show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` |
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` |
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` |
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |
### 图片填充模式 
src/image/index.js
+2 -2
View File
@@ -23,11 +23,11 @@ export default createComponent({
},
errorIcon: {
type: String,
default: 'warning-o',
default: 'photo-fail',
},
loadingIcon: {
type: String,
default: 'photo-o',
default: 'photo',
},
},
src/image/index.less
+2
View File
@@ -36,10 +36,12 @@
}
&__loading-icon {
color: @image-loading-icon-color;
font-size: @image-loading-icon-size;
}
&__error-icon {
color: @image-error-icon-color;
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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</div>
@@ -14,35 +14,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo 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">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo 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">
<div class="van-col van-col--8" style="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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
@@ -111,14 +111,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-row">
<div class="van-col van-col--8" style="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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">自定义提示</div>
src/image/test/__snapshots__/index.spec.js.snap
+5 -5
View File
@@ -2,7 +2,7 @@
exports[`default slot 1`] = `
<div class="van-image"><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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>Custom Default
</div>
`;
@@ -16,14 +16,14 @@ exports[`error-icon prop 1`] = `
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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo 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 van-image__error-icon">
<div class="van-image__error"><i class="van-icon van-icon-photo-fail van-image__error-icon">
<!----></i></div>
</div>
`;
@@ -34,7 +34,7 @@ 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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
`;
@@ -48,7 +48,7 @@ exports[`loading-icon prop 1`] = `
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 van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
`;