[new feature] NoticeBar: add new prop wrapable

fix #1568

example/pages/notice-bar/index.wxml

@@ -5,11 +5,15 @@
   />
 </demo-block>
 
-<demo-block title="禁用滚动">
-  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
-</demo-block>
-
 <demo-block title="通告栏模式">
   <van-notice-bar mode="closeable" text="{{ text }}" custom-class="demo-margin-bottom" />
   <van-notice-bar mode="link" text="{{ text }}" />
 </demo-block>
+
+<demo-block title="禁用滚动">
+  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
+</demo-block>
+
+<demo-block title="文本换行">
+  <van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" />
+</demo-block>

packages/notice-bar/index.less

@@ -6,15 +6,31 @@
   line-height: 24px;
   align-items: center;
 
-  &--within-icon {
+  &--withicon {
     position: relative;
     padding-right: 40px;
   }
 
+  &--wrapable {
+    height: auto;
+    padding: 8px 15px;
+
+    .van-notice-bar {
+      &__wrap {
+        height: auto;
+      }
+
+      &__content {
+        position: relative;
+        white-space: normal;
+      }
+    }
+  }
+
   &__left-icon {
+    display: flex;
     margin-right: 4px;
     vertical-align: middle;
-    display: flex;
     align-items: center;
   }
 
@@ -25,7 +41,7 @@
     font-size: 16px;
   }
 
-  &__content-wrap {
+  &__wrap {
     position: relative;
     height: 24px;
     overflow: hidden;

packages/notice-bar/index.ts

@@ -23,7 +23,7 @@ VantComponent({
     },
     delay: {
       type: Number,
-      value: 0
+      value: 1
     },
     speed: {
       type: Number,
@@ -44,12 +44,12 @@ VantComponent({
     backgroundColor: {
       type: String,
       value: BG_COLOR
-    }
+    },
+    wrapable: Boolean
   },
 
   data: {
-    show: true,
-    hasRightIcon: false
+    show: true
   },
 
   watch: {
@@ -59,12 +59,6 @@ VantComponent({
   },
 
   created() {
-    if (this.data.mode) {
-      this.set({
-        hasRightIcon: true
-      });
-    }
-
     this.resetAnimation = wx.createAnimation({
       duration: 0,
       timingFunction: 'linear'
@@ -79,7 +73,7 @@ VantComponent({
     init() {
       Promise.all([
         this.getRect('.van-notice-bar__content'),
-        this.getRect('.van-notice-bar__content-wrap')
+        this.getRect('.van-notice-bar__wrap')
       ]).then((rects: wx.BoundingClientRectCallbackResult[]) => {
         const [contentRect, wrapRect] = rects;
         if (

packages/notice-bar/index.wxml

@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   wx:if="{{ show }}"
-  class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
+  class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
   style="color: {{ color }}; background-color: {{ backgroundColor }};"
   bind:tap="onClick"
 >
@@ -11,8 +13,8 @@
     class="van-notice-bar__left-icon"
   />
 
-  <view class="van-notice-bar__content-wrap">
-    <view class="van-notice-bar__content {{ scrollable ? '' : 'van-ellipsis' }}" animation="{{ animationData }}">
+  <view class="van-notice-bar__wrap">
+    <view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}" animation="{{ animationData }}">
       {{ text }}
     </view>
   </view>