货无忧
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1.3 KiB

代码演示

基础用法

通过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() {}