noticebar
- 作者:kanghongyan
- 邮箱:khongyan@gmail.com
- 版本:
1.0.3
介绍
顶部滚动提示
安装
lm-*
组件使用 npm
进行管理,命名空间统一为 lm-
,请使用以下命令进行组件安装。
npm i lm-noticebar --save
- 如果你还没有安装
npm
,可通过以下方式进行 安装。 - 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
样例文档
- 待开发
使用
最少配置参数为:
- 传入
content
增加内容
<Noticebar
canClose={true}
autoPlay={true}
>
<ScrollV>
<p>内容1</p>
<p>内容2</p>
</ScrollV>
</NoticeBar>
<Noticebar
canClose={true}
autoPlay={true}
>
<ScrollH>
<p>内容2</p>
</ScrollH>
</NoticeBar>
- 传入
noticeType
增加提示的类型 text(普通的蓝色提示) | tips(暖色的温馨提示) | warning(偏粉色的警告)
<Noticebar
canClose={true}
autoPlay={true}
noticeType={'text'}
>
<p>内容2</p>
</NoticeBar>
配置参数
Prop | Type | Default | Description |
---|---|---|---|
initShow |
boolean |
true |
显示隐藏 |
canClose |
boolean |
false |
是否有右侧的关闭按钮 |
children |
node |
20 |
滚动的内容 |
className |
string |
20 |
样式 |
hasIcon |
boolean |
20 |
是否显示左边喇叭按钮 |
itemHeight |
number |
20 |
每一条内容的高度,默认20px |
closeCb |
func |
() => {} |
点击关闭回调 |
onClick |
func |
() => {} |
点击整个notice |
hasArrow |
boolean |
false |
是否有右侧箭头 |
noticeType |
string |
'' |
使用默认提供的几种类型text(普通的蓝色提示),tips(暖色的温馨提示),warning(偏粉色的警告) |
ScrollV配置参数
Prop | Type | Default | Description |
---|---|---|---|
speed |
number |
3000 | 停留时间 |
useLineHeight |
bool |
false | 当单行内容过长时,用lineHeight表示高度 |
ScrollH配置参数
Prop | Type | Default | Description |
---|---|---|---|
speed |
number |
1.0 / 30 | 速度,1s移动30px |
startPosition |
number |
0% |
初始位置 |
loopPosition |
array |
[] |
循环起始位置, eg: ["0%", "100%"] |
注意事项
- 组件注意事项
开发调试
进入项目目录后,使用 node
命令启动服务
npm run start
打包发布可通过 node
命令执行
npm run build
npm publish
相关资料
Changelog
0.1.0
- init
1.0.3
- 增加了一个属性noticeType, 提供了三种默认值。text(普通提示) | tips(温馨提示) | warning(警告提示)