VueEasyNoticeBar 使用简单的Vue通告栏组件

使用指南

安装

NPM

npm i vue-easy-notice-bar -S 

YARN

yarn add vue-easy-notice-bar

�全局插件

import { NoticeBar } from 'vue-easy-notice-bar'

Vue.use(NoticeBar);

单文件引入

import { NoticeBar } from 'vue-easy-notice-bar'

export default {
  components: {
    NoticeBar
  }
}

代码演示

基础用法

<notice-bar
  :text="[
    '重启，可以解决电脑百分之七十的问题。',
    '重装系统，可以解决百分之八十的问题。',
    '换个电脑，可以解决百分之九十的问题。',
    '解决掉提出bug的人,可以解决百分之一百的问题。'
  ]"
  :bg-color="'#fff'"
  :color="'#03a9f4'"
  left-icon="http://o9kkuebr4.bkt.clouddn.com/notice-color.png"
/>

垂直滚动模式

NoticeBarVertical支持垂直滚动，默认为垂直向上�平移动，开启属性three-d则为css 3d旋转模式。

import { NoticeBarVertical } from 'vue-easy-notice-bar'

<notice-bar-vertical
  :text="[
    '重启，可以解决电脑百分之七十的问题。',
    '重装系统，可以解决百分之八十的问题。',
    '换个电脑，可以解决百分之九十的问题。',
    '解决掉提出bug的人,可以解决百分之一百的问题。'
  ]"
  three-d
  bg-color="#ffdca9"
  color="#b36f0c"/>

API

参数	说明	类型	默认值
text	通告栏文字	String、Array	''
vertical	滚动方向是否为垂直	Boolean	false
bg-img	背景图片 URL	String	-
left-icon	左侧图标图片 URL	String	-
color	文本颜色	String	#fff
bg-color	滚动条背景	String	#03a9f4
speed	滚动速度(px/s)	Number	50
duration	滚动时间(ms)，NoticeBarVertical最大值�不超过interval	Number	-
delay	动画延迟时间(ms)	Number	1000
outview	是否从视野外开始滚动	Boolean	false
scrollable	是否禁止动画	Boolean	true
mode	通告栏模式，可选值:right、close	String	-
interval	垂直滚动的动画间隔(ms)，仅NoticeBarVertical支持	Number	3000
three-d	垂直滚动css 3d旋转模式，仅NoticeBarVertical支持	Boolean	false

Event

事件名	说明	参数
click	点击事件回调	-

TODO

• 添加默认icon
• 自定义icon
• 可显示右箭头
• 添加关闭功能和按钮
• 禁用滚动属性
• 分离水平滚动和垂直滚动组件，提取mixin
• 3D垂直翻转
• 手势滑动
• 鼠标悬停滚动暂停