toptips
- 作者:liuduan
- 邮箱:liuduan.05.05@163.com
- 版本:
0.1.9
介绍
吸顶提示信息条
安装
lm-*
组件使用 npm
进行管理,命名空间统一为 lm-
,请使用以下命令进行组件安装。
npm i lm-toptips --save
- 如果你还没有安装
npm
,可通过以下方式进行 安装。 - 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
样例文档
<Toptips>{test}</Toptips>
使用
配置参数为:
- 传入
children
显示贴士信息<Toptips>{test}</Toptips>
- 传入
icon
显示前缀图标或文本<Toptips icon={icon}>{test}</Toptips>
- 传入
mode
显示后缀样式// 关闭 <Toptips mode="closable">{test}</Toptips> // 链接 <Toptips mode="link">{test}</Toptips>
- 传入
linkText
显示链接文本<Toptips mode="link" linkText="点击跳转">{test}</Toptips>
- 传入
onClick
点击事件回调函数<Toptips mode="closable" onClick={() => console.log('click-closable')}>{test}</Toptips> <Toptips mode="link" onClick={() => console.log('click-link')}>{test}</Toptips>
- 传入
marqueePropsX
设置水平向文字显示状态<Toptips marqueePropsX={{ loop: false }}>{test}</Toptips>
- 传入
marqueePropsY
设置竖直向文字显示状态<Toptips marqueePropsX={{ loop: false, type: 'nonauto' speed: 0 }}>{test}</Toptips>
Toptips配置参数
Prop | Type | Default | Description |
---|---|---|---|
prefixCls |
String |
"lm-toptips" |
自定义类名前缀 |
className |
String |
'' |
自定义className |
mode |
String |
'' |
提示类型,可选 'closable' ,'link'
|
linkText |
`String | React.Element` | |
icon |
`String | React.Element` | |
marqueePropsX |
Object |
{type: "marquee", loop: true, speed: 0, startDelay: 800, endDelay: 500} |
水平跑马灯相关属性 |
marqueePropsY |
Object |
{type: "marquee", loop: true, speed: 15, startDelay: 800, endDelay: 500} |
竖直跑马灯相关属性 |
onClick |
Function |
() => {} |
点击关闭或者操作区域的回调函数 |
marqueePropsX参数属性
Prop | Type | Default | Description |
---|---|---|---|
prefixCls |
String |
"lm" |
自定义类名前缀 |
className |
String |
'' |
自定义className |
type |
String |
'marquee' |
显示类型 跑马灯: 'marquee' 显示...: 'ellipsis' 修剪文本: 'clip' 折行: 'break'
|
speed |
Number |
60 |
动画移动距离/每秒 |
startDelay |
Number |
800 |
动画单次播放开始延时时间 |
endDelay |
Number |
0 |
动画单次播放结束停留时间 |
loop |
Bool |
true |
是否循环播放 |
marqueePropsY参数属性
Prop | Type | Default | Description |
---|---|---|---|
prefixCls |
String |
"lm" |
自定义类名前缀 |
className |
String |
'' |
自定义className |
type |
String |
'marquee' |
滚动类型 自动: 'marquee' 手动: 'nonauto'
|
speed |
Number |
15 |
动画移动距离/每秒, 若不传或传数字0则按浏览器重绘刷新频率 |
startDelay |
Number |
800 |
动画单次播放开始延时时间 |
endDelay |
Number |
0 |
动画单次播放结束停留时间 |
loop |
Bool |
true |
是否循环播放 |
注意事项
- 当期望多列滚动显示时,
children
属性类型应为Array
,且如果Array中元素如果为DOM
,必须设置key
属性,示例:testList: [ '珍爱信用,如实填写,我们承诺对您的信息绝对保密', '该密码可用于申请或体现', <div key={0}>欢迎拨打<a>58同城客户服务热线:58585858</a>需要设置key属性</div>, <p key={1}>该密码可用于申请或体现该密码可用于申请或体现该密码可用于申请或体现该密码可用于申请或体现</p> ]
开发调试
进入项目目录后,使用 node
命令启动服务
npm run start
打包发布可通过 node
命令执行
npm run build
npm publish
相关资料
Changelog
0.1.5
- 样式控制有style改为class
- 修改github地址
0.1.7
- 兼容屏幕尺寸变化及旋转屏幕显示效果
- 更新动画滚动速度默认为按浏览器刷新频率,若设置speed可按自定义速度滚动
0.1.8
- MarqueeX、MarqueeY组件在卸载时移除监听事件
0.1.9
- 更改跑马灯滚动形式