NoticeBar 通知栏 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

在导航栏下方，一般用作系统提醒、活动提醒等通知。

规则

需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {NoticeBar} from '@21cnfe/vui'  
Vue.component('NoticeBar', NoticeBar)

代码演示

NoticeBar 通知栏 noticeBars

基本用法通过 mode 属性设置提示类型，可选 closeable ， link ；left-icon 属性设置左侧图标, onClick 为关闭操作回调方法。

<NoticeBar left-icon="voice" mode="closable" :text="text" />
<NoticeBar left-icon="voice" mode="link" :text="text" />
<NoticeBar left-icon="voice" mode="closable" :text="text" @onClick="handleClick" />

操作文案通过 action 属性设置提示类型。

<NoticeBar left-icon="voice" action="去看看" :text="text" />

滚动设置通过 marqueeOption 属性设置滚动。

<NoticeBar left-icon="voice" mode="link" :text="text2" :marqueeOption="option" />

API

属性	说明	类型	默认值
`mode`	提示类型，可选 `closable`,`link`	String	`closable`
`left-icon`	在开始位置设置图标	String(图标库中的图标类型)	`--`
`marqueeProps`	marquee 参数	Object	`{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}`
`action`	用于替换操作 icon 的文案	String	`--`

Events

事件名称	说明	回调参数
`onClick`	点击关闭或者操作区域的回调函数	`--`

1. NoticeBar 通知栏 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

NoticeBar 通知栏 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Events

NoticeBar 通知栏 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用