[new feature] NoticeBar: add wrapable prop (#2992)

packages/notice-bar/demo/index.vue

@@ -7,14 +7,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('mode')">
-      <van-notice-bar
-        :scrollable="false"
-        :text="$t('text')"
-      />
-    </demo-block>
-
-    <demo-block :title="$t('title3')">
       <van-notice-bar
         mode="closeable"
         :text="$t('text')"
@@ -24,6 +17,21 @@
         :text="$t('text')"
       />
     </demo-block>
+
+    <demo-block :title="$t('unscrollable')">
+      <van-notice-bar
+        :scrollable="false"
+        :text="$t('text')"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('wrapable')">
+      <van-notice-bar
+        wrapable
+        :scrollable="false"
+        :text="$t('text')"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -31,13 +39,15 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '禁用滚动',
+      unscrollable: '禁用滚动',
-      title3: '通告栏模式',
+      mode: '通告栏模式',
+      wrapable: '文本换行',
       text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
     },
     'en-US': {
-      title2: 'Disable scroll',
+      mode: 'Mode',
-      title3: 'Mode',
+      wrapable: 'Wrapable',
+      unscrollable: 'Disable scroll',
       text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
     }
   }

packages/notice-bar/en-US.md

@@ -18,14 +18,6 @@ Vue.use(NoticeBar);
 />
 ```
 
-#### Disable scroll
-
-```html
-<van-notice-bar :scrollable="false">
-  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
-</van-notice-bar>
-```
-
 #### Mode
 
 ```html
@@ -38,6 +30,22 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```
 
+#### Disable scroll
+
+```html
+<van-notice-bar :scrollable="false">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+```
+
+#### Wrapable
+
+```html
+<van-notice-bar wrapable :scrollable="false">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+```
+
 ### API
 
 | Attribute | Description | Type | Default |
@@ -46,6 +54,7 @@ Vue.use(NoticeBar);
 | delay | Animation delay (s) | `Number` | `1` |
 | speed | Scroll speed (px/s) | `Number` | `50` |
 | scrollable | Whether to scroll content | `Boolean` | `true` |
+| wrapable | Whether to enable text wrap | `Boolean` | `false` | - |
 | left-icon | Left Icon | `String` | - |
 | color | Text color | `String` | `#f60` |
 | background | Background color | `String` | `#fff7cc` |

packages/notice-bar/index.js

@@ -9,6 +9,7 @@ export default sfc({
     mode: String,
     color: String,
     leftIcon: String,
+    wrapable: Boolean,
     background: String,
     delay: {
       type: [String, Number],
@@ -94,17 +95,23 @@ export default sfc({
     return (
       <div
         vShow={this.showNoticeBar}
-        class={bem({ withicon: mode })}
+        class={bem({ withicon: mode, wrapable: this.wrapable })}
         style={barStyle}
         onClick={() => {
           this.$emit('click');
         }}
       >
-        {this.leftIcon && <Icon class={bem('left-icon')} name={this.leftIcon} />}
+        {this.leftIcon && (
+          <Icon class={bem('left-icon')} name={this.leftIcon} />
+        )}
         <div ref="wrap" class={bem('wrap')}>
           <div
             ref="content"
-            class={[bem('content'), this.animationClass, { 'van-ellipsis': !this.scrollable }]}
+            class={[
+              bem('content'),
+              this.animationClass,
+              { 'van-ellipsis': !this.scrollable && !this.wrapable }
+            ]}
             style={contentStyle}
             onAnimationend={this.onAnimationEnd}
             onWebkitAnimationEnd={this.onAnimationEnd}
@@ -112,7 +119,13 @@ export default sfc({
             {this.slots() || this.text}
           </div>
         </div>
-        {iconName && <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />}
+        {iconName && (
+          <Icon
+            class={bem('right-icon')}
+            name={iconName}
+            onClick={this.onClickIcon}
+          />
+        )}
       </div>
     );
   }

packages/notice-bar/index.less

@@ -11,14 +11,9 @@
   color: @orange-dark;
   background-color: @orange-light;
 
-  &--withicon {
-    position: relative;
-    padding-right: 40px;
-  }
-
   &__left-icon {
     font-size: 16px;
-    min-width: 20px;
+    min-width: 22px;
   }
 
   &__right-icon {
@@ -47,10 +42,31 @@
 
   &__play {
     animation: van-notice-bar-play linear both;
+
+    &--infinite {
+      animation: van-notice-bar-play-infinite linear infinite both;
+    }
   }
 
-  &__play--infinite {
+  &--wrapable {
-    animation: van-notice-bar-play-infinite linear infinite both;
+    height: auto;
+    padding: 8px 15px;
+
+    .van-notice-bar {
+      &__wrap {
+        height: auto;
+      }
+
+      &__content {
+        position: relative;
+        white-space: normal;
+      }
+    }
+  }
+
+  &--withicon {
+    position: relative;
+    padding-right: 40px;
   }
 }
 

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

@@ -10,13 +10,6 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <div class="van-notice-bar">
-      <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
-      </div>
-    </div>
-  </div>
   <div>
     <div class="van-notice-bar van-notice-bar--withicon">
       <div class="van-notice-bar__wrap">
@@ -31,5 +24,19 @@ exports[`renders demo correctly 1`] = `
         <!----></i>
     </div>
   </div>
+  <div>
+    <div class="van-notice-bar">
+      <div class="van-notice-bar__wrap">
+        <div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-notice-bar van-notice-bar--wrapable">
+      <div class="van-notice-bar__wrap">
+        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

packages/notice-bar/zh-CN.md

@@ -18,16 +18,8 @@ Vue.use(NoticeBar);
 />
 ```
 
-#### 禁用滚动
-文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
-
-```html
-<van-notice-bar :scrollable="false">
-  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
-</van-notice-bar>
-```
-
 #### 通告栏模式
+
 默认模式为空，支持`closeable`和`link`。
 
 ```html
@@ -42,6 +34,26 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```
 
+#### 禁用滚动
+
+文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
+
+```html
+<van-notice-bar :scrollable="false">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+
+#### 文本换行
+
+禁用滚动时，可以设置`wrapable`来开启文本换行
+
+```html
+<van-notice-bar wrapable :scrollable="false">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -50,6 +62,7 @@ Vue.use(NoticeBar);
 | delay | 动画延迟时间 (s) | `Number` | `1` | - |
 | speed | 滚动速率 (px/s) | `Number` | `50` | - |
 | scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | - |
+| wrapable | 是否开启文本换行，只在禁用滚动时生效 | `Boolean` | `false` | 1.6.11 |
 | left-icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
 | color | 文本颜色 | `String` | `#f60` | - |
 | background | 滚动条背景 | `String` | `#fff7cc` | - |