feat(NoticeBar): add left/right-icon slot (#2029)

example/pages/notice-bar/index.wxml

@@ -14,6 +14,13 @@
   <van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
 </demo-block>
 
-<demo-block title="文本换行">
+<demo-block title="多行展示">
   <van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" />
 </demo-block>
+
+<demo-block title="使用左右插槽">
+  <van-notice-bar text="{{ text }}">
+    <text slot="left-icon">[公告]</text>
+    <text slot="right-icon">[结束]</text>
+  </van-notice-bar>
+</demo-block>

packages/notice-bar/README.md

@@ -31,6 +31,27 @@
 />
 ```
 
+### 多行展示
+禁用滚动时，可以设置`wrapable`来开启多行展示
+
+```html
+<van-notice-bar
+  wrapable
+  scrollable="false"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
+/>
+```
+
+### 使用左右插槽
+使用`left-icon`插槽和`right-icon`插槽自定义左右固定内容
+
+```html
+<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。">
+  <text slot="left-icon">[公告]</text>
+  <text slot="right-icon">[结束]</text>
+</van-notice-bar>
+```
+
 ### 通告栏模式
 默认模式为空，支持`closeable`和`link`。
 
@@ -69,6 +90,13 @@
 |-----------|-----------|-----------|
 | bind:click | 点击事件回调 | - |
 
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| left-icon | 自定义左侧固定内容 |
+| right-icon | 自定义右侧固定内容 |
+
 ### 外部样式类
 
 | 类名 | 说明 |

packages/notice-bar/index.wxml

@@ -12,6 +12,7 @@
     name="{{ leftIcon }}"
     class="van-notice-bar__left-icon"
   />
+  <slot wx:else name="left-icon" />
 
   <view class="van-notice-bar__wrap">
     <view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}" animation="{{ animationData }}">
@@ -26,10 +27,11 @@
     bind:tap="onClickIcon"
   />
   <navigator
-    wx:if="{{ mode === 'link' }}"
+    wx:elif="{{ mode === 'link' }}"
     url="{{ url }}"
     open-type="{{ openType }}"
   >
     <van-icon class="van-notice-bar__right-icon" name="arrow" />
   </navigator>
+  <slot wx:else name="right-icon" />
 </view>