[new feature] NoticeBar: add right-icon prop

docs/markdown/v2-progress-tracking.md

@@ -54,6 +54,7 @@
 ## NoticeBar
 
 - 新增`left-icon`插槽
+- 新增`right-icon`插槽
 
 ### Sku
 

packages/notice-bar/index.js

@@ -77,9 +77,7 @@ export default sfc({
   },
 
   render(h) {
-    const { mode } = this;
-
-    const iconName = mode === 'closeable' ? 'cross' : mode === 'link' ? 'arrow' : '';
+    const { slots, mode, leftIcon, onClickIcon } = this;
 
     const barStyle = {
       color: this.color,
@@ -92,20 +90,41 @@ export default sfc({
       animationDuration: this.duration + 's'
     };
 
-    const LeftIcon =
-      this.slots('left-icon') ||
-      (this.leftIcon && <Icon class={bem('left-icon')} name={this.leftIcon} />);
+    function LeftIcon() {
+      const slot = slots('left-icon');
+
+      if (slot) {
+        return slot;
+      }
+
+      if (leftIcon) {
+        return <Icon class={bem('left-icon')} name={leftIcon} />;
+      }
+    }
+
+    function RightIcon() {
+      const slot = slots('right-icon');
+
+      if (slot) {
+        return slot;
+      }
+
+      const iconName = mode === 'closeable' ? 'cross' : mode === 'link' ? 'arrow' : '';
+      if (iconName) {
+        return <Icon class={bem('right-icon')} name={iconName} onClick={onClickIcon} />;
+      }
+    }
 
     return (
       <div
         vShow={this.showNoticeBar}
-        class={bem({ withicon: mode, wrapable: this.wrapable })}
+        class={bem({ wrapable: this.wrapable })}
         style={barStyle}
         onClick={() => {
           this.$emit('click');
         }}
       >
-        {LeftIcon}
+        {LeftIcon()}
         <div ref="wrap" class={bem('wrap')}>
           <div
             ref="content"
@@ -121,9 +140,7 @@ export default sfc({
             {this.slots() || this.text}
           </div>
         </div>
-        {iconName && (
-          <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />
-        )}
+        {RightIcon()}
       </div>
     );
   }

packages/notice-bar/index.less

@@ -11,17 +11,14 @@
   color: @orange-dark;
   background-color: @orange-light;
 
-  &__left-icon {
+  &__left-icon,
+  &__right-icon {
     font-size: 16px;
     min-width: 22px;
   }
 
   &__right-icon {
-    top: 50%;
-    right: 15px;
-    font-size: 16px;
-    position: absolute;
-    margin-top: -0.5em;
+    text-align: right;
   }
 
   &__wrap {
@@ -63,11 +60,6 @@
       }
     }
   }
-
-  &--withicon {
-    position: relative;
-    padding-right: 40px;
-  }
 }
 
 /**

packages/notice-bar/test/__snapshots__/index.spec.js.snap

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`left-icon slot 1`] = `
+exports[`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>
+  </div>Custom Right Icon</div>
 `;

packages/notice-bar/test/index.spec.js

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