Notice 通知栏

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

代码演示

基础用法

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

<hd-notice
  :title="title"
></hd-notice>

export default {
  data() {
    return {
      title: '有新的消息点击查看'
    }
  }
}

主题色

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

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

export default {
  data() {
    return {
      type: 'primary'
    }
  }
}

通知栏轮播滚动

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

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

export default {
  data() {
    return {
      scrollable: false
    }
  }
}

通知栏左侧图标

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

<hd-notice
  :showLeftIcon="showLeftIcon"
  :leftIcon="leftIcon"
></hd-notice>

export default {
  data() {
    return {
      showLeftIcon: true,
      leftIcon: '/static/ic_noticebar.png'
    }
  }
}

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

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

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

export default {
  data() {
    return {
      showLeftIcon: true,
      count: 0
    }
  }
}

事件

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

<hd-notice
  :showLeftIcon="showLeftIcon"
  :leftIcon="leftIcon"
  :showRightIcon="showRightIcon"
  :count="count"
  @left="left"
  @right="right"
  @click="click"
></hd-notice>

export default {
  data() {
    return {
      showLeftIcon: true,
      leftIcon: '/static/ic_noticebar.png',
      showLeftIcon: true,
      count: 1
    }
  },
  methods: {
    left() {},
    right() {},
    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组件被点击时触发	-