feat(notice-bar): add default slot (#4048)

fix #4023

packages/notice-bar/README.md

@@ -90,7 +90,7 @@
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
-| ---------- | ---------------------------------------- | --------- | ---------- |
+| --- | --- | --- | --- |
 | mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` |
 | text | 通知文本内容 | _string_ | `''` |
 | color | 通知文本颜色 | _string_ | `#ed6a0c` |
@@ -112,7 +112,8 @@
 ### Slot
 
 | 名称       | 说明                                     |
-| ---------- | -------------- |
+| ---------- | ---------------------------------------- |
+| -          | 通知文本内容，仅在 `text` 属性为空时有效 |
 | left-icon  | 自定义左侧图标                           |
 | right-icon | 自定义右侧图标                           |
 

packages/notice-bar/index.ts

@@ -6,11 +6,7 @@ VantComponent({
     text: {
       type: String,
       value: '',
-      observer() {
-        wx.nextTick(() => {
-          this.init();
-        });
-      },
+      observer: 'init',
     },
     mode: {
       type: String,
@@ -31,11 +27,7 @@ VantComponent({
     speed: {
       type: Number,
       value: 50,
-      observer() {
-        wx.nextTick(() => {
-          this.init();
-        });
-      },
+      observer: 'init',
     },
     scrollable: {
       type: Boolean,
@@ -66,8 +58,13 @@ VantComponent({
     this.timer && clearTimeout(this.timer);
   },
 
+  mounted() {
+    this.init();
+  },
+
   methods: {
     init() {
+      requestAnimationFrame(() => {
         Promise.all([
           getRect(this, '.van-notice-bar__content'),
           getRect(this, '.van-notice-bar__wrap'),
@@ -99,6 +96,7 @@ VantComponent({
             this.scroll();
           }
         });
+      });
     },
 
     scroll() {

packages/notice-bar/index.wxml

@@ -18,6 +18,7 @@
   <view class="van-notice-bar__wrap">
     <view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}" animation="{{ animationData }}">
       {{ text }}
+      <slot wx:if="{{ !text }}"></slot>
     </view>
   </view>