Notice Bar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

import { NoticeBar } from 'mind-ui-vue';
Vue.use(NoticeBar);

示例

基础用法

<m-notice-bar>
  练得身形似鹤形，千株松下两函经。
  我来问道无馀说，云在青霄水在瓶。
  选得幽居惬野情，终年无送亦无迎。
  有时直上孤峰顶，月下披云啸一声。
</m-notice-bar>

内容超出不滚动

<m-notice-bar :scrollable="false">
  练得身形似鹤形，千株松下两函经。
  我来问道无馀说，云在青霄水在瓶。
  选得幽居惬野情，终年无送亦无迎。
  有时直上孤峰顶，月下披云啸一声。
</m-notice-bar>

多行显示

<m-notice-bar multiline>
  练得身形似鹤形，千株松下两函经。
  我来问道无馀说，云在青霄水在瓶。
  选得幽居惬野情，终年无送亦无迎。
  有时直上孤峰顶，月下披云啸一声。
</m-notice-bar>

自定义两端内容

<m-notice-bar>
  <div class="preifx" slot="preifx">
    <m-icon name="notice" :size="36" color="#ed6a0c" />
  </div>

  <div>
    练得身形似鹤形，千株松下两函经。
    我来问道无馀说，云在青霄水在瓶。
    选得幽居惬野情，终年无送亦无迎。
    有时直上孤峰顶，月下披云啸一声。
  </div>

  <div class="suffix" slot="suffix">
    <m-icon name="close" :size="36" color="#ed6a0c" />
  </div>
</m-notice-bar>

Api

Props

参数	说明	类型	可选值	默认值
speed	滚动速率 (px/s)	Number	—	100
delay	动画延迟时间 (s)	Number	—	1
scrollable	是否在长度溢出时滚动播放	Boolean	—	true

Slots

名称	说明
preifx	自定义前缀
-	通知内容
suffix	自定义后缀