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

fix #4023

packages/notice-bar/README.md

@@ -89,18 +89,18 @@
 
 ### Props
 
-| 参数       | 说明                                     | 类型      | 默认值     |
-| ---------- | ---------------------------------------- | --------- | ---------- |
-| mode       | 通告栏模式，可选值为 `closeable` `link`  | _string_  | `''`       |
-| text       | 通知文本内容                             | _string_  | `''`       |
-| color      | 通知文本颜色                             | _string_  | `#ed6a0c`  |
-| background | 滚动条背景                               | _string_  | `#fffbe8`  |
-| left-icon  | 左侧[图标名称](#/icon)或图片链接         | _string_  | -          |
-| delay      | 动画延迟时间 (s)                         | _number_  | `1`        |
-| speed      | 滚动速率 (px/s)                          | _number_  | `50`       |
-| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | `true`     |
-| wrapable   | 是否开启文本换行，只在禁用滚动时生效     | _boolean_ | `false`    |
-| open-type  | 微信开放能力                             | _string_  | `navigate` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` |
+| text | 通知文本内容 | _string_ | `''` |
+| color | 通知文本颜色 | _string_ | `#ed6a0c` |
+| background | 滚动条背景 | _string_ | `#fffbe8` |
+| left-icon | 左侧[图标名称](#/icon)或图片链接 | _string_ | - |
+| delay | 动画延迟时间 (s) | _number_ | `1` |
+| speed | 滚动速率 (px/s) | _number_ | `50` |
+| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | `true` |
+| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
+| open-type | 微信开放能力 | _string_ | `navigate` |
 
 ### Events
 
@@ -111,10 +111,11 @@
 
 ### Slot
 
-| 名称       | 说明           |
-| ---------- | -------------- |
-| left-icon  | 自定义左侧图标 |
-| right-icon | 自定义右侧图标 |
+| 名称       | 说明                                     |
+| ---------- | ---------------------------------------- |
+| -          | 通知文本内容，仅在 `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,38 +58,44 @@ VantComponent({
     this.timer && clearTimeout(this.timer);
   },
 
+  mounted() {
+    this.init();
+  },
+
   methods: {
     init() {
-      Promise.all([
-        getRect(this, '.van-notice-bar__content'),
-        getRect(this, '.van-notice-bar__wrap'),
-      ]).then((rects) => {
-        const [contentRect, wrapRect] = rects;
-        if (
-          contentRect == null ||
-          wrapRect == null ||
-          !contentRect.width ||
-          !wrapRect.width
-        ) {
-          return;
-        }
+      requestAnimationFrame(() => {
+        Promise.all([
+          getRect(this, '.van-notice-bar__content'),
+          getRect(this, '.van-notice-bar__wrap'),
+        ]).then((rects) => {
+          const [contentRect, wrapRect] = rects;
+          if (
+            contentRect == null ||
+            wrapRect == null ||
+            !contentRect.width ||
+            !wrapRect.width
+          ) {
+            return;
+          }
 
-        const { speed, scrollable, delay } = this.data;
+          const { speed, scrollable, delay } = this.data;
 
-        if (scrollable || wrapRect.width < contentRect.width) {
-          const duration = (contentRect.width / speed) * 1000;
+          if (scrollable || wrapRect.width < contentRect.width) {
+            const duration = (contentRect.width / speed) * 1000;
 
-          this.wrapWidth = wrapRect.width;
-          this.contentWidth = contentRect.width;
-          this.duration = duration;
-          this.animation = wx.createAnimation({
-            duration,
-            timingFunction: 'linear',
-            delay,
-          });
+            this.wrapWidth = wrapRect.width;
+            this.contentWidth = contentRect.width;
+            this.duration = duration;
+            this.animation = wx.createAnimation({
+              duration,
+              timingFunction: 'linear',
+              delay,
+            });
 
-          this.scroll();
-        }
+            this.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>