| 1 | ---
|
| 2 | title: NoticeBar 通告栏
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/notice-bar
|
| 4 | ---
|
| 5 |
|
| 6 | 通常用于系统提醒、活动提醒等通知
|
| 7 |
|
| 8 | ### 引入
|
| 9 |
|
| 10 | ```javascript
|
| 11 | import { NoticeBar } from 'mand-mobile'
|
| 12 |
|
| 13 | Vue.component(NoticeBar.name, NoticeBar)
|
| 14 | ```
|
| 15 |
|
| 16 |
|
| 17 | ### 代码演示
|
| 18 |
|
| 19 |
|
| 20 | ### API
|
| 21 |
|
| 22 | #### NoticeBar Props
|
| 23 | |属性 | 说明 | 类型 | 默认值 | 备注|
|
| 24 | |----|-----|------|------|------|
|
| 25 | |mode|右边提示类型|String|-|`closable`, `link`|
|
| 26 | |type|主题样式|String|`default`|`default`, `activity`, `warning`|
|
| 27 | |time|显示时长|Number|`0`|单位为`ms`，不需要自动消失可将其置为`0`|
|
| 28 | |round|圆角展示|Boolean|`false`|-|
|
| 29 | |multi-rows|内容超出多行展示|Boolean|`false`|优先级高于scrollable|
|
| 30 | |scrollable|内容超出滚动展示|Boolean|`false`|优先级低于multiRows|
|
| 31 | |icon|左侧图标|String|-|-|
|
| 32 | |icon-svg|使用svg图标|Boolean|`false`|-|
|
| 33 |
|
| 34 | #### NoticeBar Slots
|
| 35 |
|
| 36 | #### default
|
| 37 | 默认内容插槽
|
| 38 |
|
| 39 | #### left
|
| 40 | 左侧插槽，一般用于放置图标等
|
| 41 |
|
| 42 | #### right
|
| 43 | 右侧插槽，一般用于放置图标等
|
| 44 |
|
| 45 | #### NoticeBar Events
|
| 46 |
|
| 47 | ##### @close()
|
| 48 | 通告栏关闭事件（设置`mode`为`closable`）
|
| 49 |
|