feat(Image): add error-icon prop (#5470)

This commit is contained in:
neverland 2020-01-03 18:49:41 +08:00 committed by GitHub
parent e380c23b1c
commit 46e995ab4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 1 deletions

View File

@ -78,6 +78,7 @@ Vue.use(Lazyload);
| lazy-load | Whether to enable lazy loadshould register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | - | | lazy-load | Whether to enable lazy loadshould register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | - |
| show-error | Whether to show error placeholder | *boolean* | `true` | 2.0.9 | | show-error | Whether to show error placeholder | *boolean* | `true` | 2.0.9 |
| show-loading | Whether to show loading placeholder | *boolean* | `true` | 2.0.9 | | show-loading | Whether to show loading placeholder | *boolean* | `true` | 2.0.9 |
| error-icon | Error icon | *string* | `warning-o` | 2.4.2 |
| loading-icon | Loading icon | *string* | `photo-o` | 2.4.2 | | loading-icon | Loading icon | *string* | `photo-o` | 2.4.2 |
### fit optional value ### fit optional value

View File

@ -104,6 +104,7 @@ Vue.use(Image);
| lazy-load | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | - | | lazy-load | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | - |
| show-error | 是否展示图片加载失败提示 | *boolean* | `true` | 2.0.9 | | show-error | 是否展示图片加载失败提示 | *boolean* | `true` | 2.0.9 |
| show-loading | 是否展示图片加载中提示 | *boolean* | `true` | 2.0.9 | | show-loading | 是否展示图片加载中提示 | *boolean* | `true` | 2.0.9 |
| error-icon | 失败时提示的图标名称或图片链接,可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `warning-o` | 2.4.2 |
| loading-icon | 加载时提示的图标名称或图片链接,可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `photo-o` | 2.4.2 | | loading-icon | 加载时提示的图标名称或图片链接,可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `photo-o` | 2.4.2 |
### 图片填充模式 ### 图片填充模式

View File

@ -21,6 +21,10 @@ export default createComponent({
type: Boolean, type: Boolean,
default: true default: true
}, },
errorIcon: {
type: String,
default: 'warning-o'
},
loadingIcon: { loadingIcon: {
type: String, type: String,
default: 'photo-o' default: 'photo-o'
@ -123,7 +127,7 @@ export default createComponent({
return ( return (
<div class={bem('error')}> <div class={bem('error')}>
{this.slots('error') || ( {this.slots('error') || (
<Icon name="warning-o" class={bem('error-icon')} /> <Icon name={this.errorIcon} class={bem('error-icon')} />
)} )}
</div> </div>
); );

View File

@ -1,5 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`error-icon prop 1`] = `
<div class="van-image">
<div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
<!----></i></div>
</div>
`;
exports[`lazy load 1`] = ` exports[`lazy load 1`] = `
<div class="van-image"><img class="van-image__img"> <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-o van-image__loading-icon">

View File

@ -125,6 +125,19 @@ test('show-error prop', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('error-icon prop', () => {
const wrapper = mount(Image, {
propsData: {
errorIcon: 'error',
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
}
});
wrapper.find('img').trigger('error');
expect(wrapper).toMatchSnapshot();
});
test('loading-icon prop', () => { test('loading-icon prop', () => {
const wrapper = mount(Image, { const wrapper = mount(Image, {
propsData: { propsData: {