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

2019-03-18 20:02:19 +08:00
parent 7b0a3319ba
commit 7b919ce890
6 changed files with 116 additions and 48 deletions
@@ -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` | - |