[new feauture] NoticeBar: add left-icon slot

This commit is contained in:
陈嘉涵 2019-04-30 14:48:10 +08:00
parent e00f43e595
commit 152ee6a90d
4 changed files with 36 additions and 8 deletions

View File

@ -51,6 +51,10 @@
- 新增`Skeleton`骨架屏组件 - 新增`Skeleton`骨架屏组件
## NoticeBar
- 新增`left-icon`插槽
### Sku ### Sku
- 新增`preview-open`事件 - 新增`preview-open`事件

View File

@ -92,6 +92,10 @@ export default sfc({
animationDuration: this.duration + 's' animationDuration: this.duration + 's'
}; };
const LeftIcon =
this.slots('left-icon') ||
(this.leftIcon && <Icon class={bem('left-icon')} name={this.leftIcon} />);
return ( return (
<div <div
vShow={this.showNoticeBar} vShow={this.showNoticeBar}
@ -101,9 +105,7 @@ export default sfc({
this.$emit('click'); this.$emit('click');
}} }}
> >
{this.leftIcon && ( {LeftIcon}
<Icon class={bem('left-icon')} name={this.leftIcon} />
)}
<div ref="wrap" class={bem('wrap')}> <div ref="wrap" class={bem('wrap')}>
<div <div
ref="content" ref="content"
@ -120,11 +122,7 @@ export default sfc({
</div> </div>
</div> </div>
{iconName && ( {iconName && (
<Icon <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />
class={bem('right-icon')}
name={iconName}
onClick={this.onClickIcon}
/>
)} )}
</div> </div>
); );

View File

@ -0,0 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`left-icon slot 1`] = `
<div class="van-notice-bar">Custom Left Icon<div class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">
Content
</div>
</div>
</div>
`;

View File

@ -12,3 +12,19 @@ test('close event', () => {
close.trigger('click'); close.trigger('click');
expect(wrapper.emitted('close')).toBeTruthy(); expect(wrapper.emitted('close')).toBeTruthy();
}); });
test('left-icon slot', () => {
const wrapper = mount({
template: `
<notice-bar>
Content
<template v-slot:left-icon>Custom Left Icon</template>
</notice-bar>
`,
components: {
NoticeBar
}
});
expect(wrapper).toMatchSnapshot();
});