feat(List): add error slot

This commit is contained in:
陈嘉涵 2019-12-26 20:29:53 +08:00 committed by neverland
parent 8a0705d761
commit e9a9388202
5 changed files with 32 additions and 6 deletions

View File

@ -133,3 +133,4 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance
| default | List content | | default | List content |
| loading | Custom loading tips | | loading | Custom loading tips |
| finished | Custom finished tips | | finished | Custom finished tips |
| error | Custom error tips |

View File

@ -140,6 +140,7 @@ export default {
| default | 列表内容 | | default | 列表内容 |
| loading | 自定义底部加载中提示 | | loading | 自定义底部加载中提示 |
| finished | 自定义加载完成后的提示文案 | | finished | 自定义加载完成后的提示文案 |
| error | 自定义加载失败后的提示文案 |
## 常见问题 ## 常见问题

View File

@ -136,14 +136,18 @@ export default createComponent({
}, },
genErrorText() { genErrorText() {
if (this.error && this.errorText) { if (this.error) {
const text = this.slots('error') || this.errorText;
if (text) {
return ( return (
<div onClick={this.clickErrorText} class={bem('error-text')}> <div onClick={this.clickErrorText} class={bem('error-text')}>
{this.errorText} {text}
</div> </div>
); );
} }
} }
}
}, },
render() { render() {

View File

@ -1,5 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`error slot 1`] = `
<div role="feed" class="van-list">
<div class="van-list__error-text">Custom Error</div>
<div class="van-list__placeholder"></div>
</div>
`;
exports[`finished slot 1`] = ` exports[`finished slot 1`] = `
<div role="feed" class="van-list"> <div role="feed" class="van-list">
<div class="van-list__finished-text">Custom Finished</div> <div class="van-list__finished-text">Custom Finished</div>

View File

@ -83,6 +83,19 @@ test('finished slot', async () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('error slot', async () => {
const wrapper = mount(List, {
propsData: {
error: true
},
scopedSlots: {
error: () => 'Custom Error'
}
});
expect(wrapper).toMatchSnapshot();
});
test('immediate check false', async () => { test('immediate check false', async () => {
const wrapper = mount(List, { const wrapper = mount(List, {
propsData: { propsData: {