From 152ee6a90db599d5b918f0850087de9729322080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 30 Apr 2019 14:48:10 +0800
Subject: [PATCH] [new feauture] NoticeBar: add left-icon slot

---
 docs/markdown/v2-progress-tracking.md            |  4 ++++
 packages/notice-bar/index.js                     | 14 ++++++--------
 .../test/__snapshots__/index.spec.js.snap        | 10 ++++++++++
 packages/notice-bar/test/index.spec.js           | 16 ++++++++++++++++
 4 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 packages/notice-bar/test/__snapshots__/index.spec.js.snap

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();
+});