1.1.2 • Published 6 years ago
vue-easy-notice-bar v1.1.2
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="'今天天气多云转晴'"
:bg-color="'#fff'"
:color="'#03a9f4'"
left-icon="http://o9kkuebr4.bkt.clouddn.com/notice-color.png"
/>
垂直滚动模式
默认模式为水平滚动,组件NoticeBarVertical为垂直方向滚动,此组件text属性必须为数组。
import { NoticeBarVertical } from 'vue-easy-notice-bar'
export default {
...
components: {
NoticeBarVertical
}
...
}
<notice-bar-vertical
:text="[
'重启,可以解决电脑百分之七十的问题。',
'重装系统,可以解决百分之八十的问题。',
'换个电脑,可以解决百分之九十的问题。',
'解决掉提出bug的人,可以解决百分之一百的问题。'
]"
bg-color="#ffdca9"
color="#b36f0c"/>
NoticeBarVertical还支持3D视觉滚动
<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 | 垂直滚动3d视觉模式,仅NoticeBarVertical支持 | Boolean | false |
Event
事件名 | 说明 | 参数 |
---|---|---|
click | 点击事件回调 | - |
TODO
- 添加默认icon
- 自定义icon
- 可显示右箭头
- 添加关闭功能和按钮
- 禁用滚动属性
- 分离水平滚动和垂直滚动组件,提取mixin
- 3D垂直翻转
- 手势滑动
- 鼠标悬停滚动暂停