diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 81683c277..b5cb740b7 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -51,6 +51,10 @@ - 新增`Skeleton`骨架屏组件 +## NoticeBar + +- 新增`left-icon`插槽 + ### Sku - 新增`preview-open`事件 diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.js index 1d4d00fc3..9e98dc09a 100644 --- a/packages/notice-bar/index.js +++ b/packages/notice-bar/index.js @@ -92,6 +92,10 @@ export default sfc({ animationDuration: this.duration + 's' }; + const LeftIcon = + this.slots('left-icon') || + (this.leftIcon && <Icon class={bem('left-icon')} name={this.leftIcon} />); + return ( <div vShow={this.showNoticeBar} @@ -101,9 +105,7 @@ export default sfc({ this.$emit('click'); }} > - {this.leftIcon && ( - <Icon class={bem('left-icon')} name={this.leftIcon} /> - )} + {LeftIcon} <div ref="wrap" class={bem('wrap')}> <div ref="content" @@ -120,11 +122,7 @@ export default sfc({ </div> </div> {iconName && ( - <Icon - class={bem('right-icon')} - name={iconName} - onClick={this.onClickIcon} - /> + <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} /> )} </div> ); diff --git a/packages/notice-bar/test/__snapshots__/index.spec.js.snap b/packages/notice-bar/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..2b0a8b6a2 --- /dev/null +++ b/packages/notice-bar/test/__snapshots__/index.spec.js.snap @@ -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> +`; diff --git a/packages/notice-bar/test/index.spec.js b/packages/notice-bar/test/index.spec.js index 2352815b5..c38fc7397 100644 --- a/packages/notice-bar/test/index.spec.js +++ b/packages/notice-bar/test/index.spec.js @@ -12,3 +12,19 @@ test('close event', () => { close.trigger('click'); 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(); +});