Notice 通知栏

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

代码演示

基础用法

通过title控制通知栏显示的信息内容。

<hd-notice title="有新的消息点击查看"></hd-notice>

主题色

通过type属性设置通知栏的主题颜色。

<hd-notice title="有新的消息点击查看" type="primary"></hd-notice>

通知栏轮播滚动

通过scrollable属性控制通知栏是否轮播滚动。

<hd-notice scrollable="false"></hd-notice>

通知栏左侧图标

通过showLeftIcon属性控制通知栏左侧图标显示隐藏，leftIcon为图标 url。

<hd-notice :showLeftIcon="true" leftIcon="/static/ic_noticebar.png"></hd-notice>

通知栏轮播右侧徽标及数量显示

通过showRightIcon属性控制通知栏右侧徽标显示隐藏；count显示消息数量，为 0 时，也会隐藏右侧徽标。

<hd-notice :showRightIcon="true" :count="0"></hd-notice>

事件

left事件 左图标被点击时触发、right事件 右图标被点击触发、click事件 Notice 组件被点击时触发。

<hd-notice
  :showLeftIcon="true"
  leftIcon="/static/ic_noticebar.png"
  :showRightIcon="true"
  count="1"
  @left="left"
  @right="right"
  @click="click"
></hd-notice>

function left() {}
function right() {}
function click() {}

Props

Name	Description	Type	Required	Default
title	标题名称	String	false	默认值是：999999
type	类型	'default' / 'primary' / 'error' / 'warning' / 'success'	false	默认值是：default
backgroundColor	背景色	String	false	默认值是：#E9F0FF
speed	文字滚动的速度px/s	Number	false	默认值是：100
leftIcon	左侧icon	String	false	-
single	是否单行	Boolean	false	默认值是：false
scrollable	是否滚动，添加后控制单行效果取消	Boolean	false	默认值是：false
count	消息数量	Number	false	默认值是：0
rightIcon	右侧icon	String	false	默认值是：hdIcon-arrow-right
showRightIcon	是否显示右侧icon	Boolean	false	默认值是：false

Events

Event Name	Description	Parameters
right	左图标被点击时触发	-
left	右图标被点击触发	-
click	Notice组件被点击时触发	-