* 作者:liuduan * 邮箱:liuduan.05.05@163.com * 版本:**`0.2.0`**


Keywords
earth, react, reactsfc, toptips
Install
npm install lm-toptips@0.2.0

Documentation

toptips

介绍

吸顶提示信息条


安装

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

  1. 样式控制有style改为class
  2. 修改github地址

0.1.7

  1. 兼容屏幕尺寸变化及旋转屏幕显示效果
  2. 更新动画滚动速度默认为按浏览器刷新频率,若设置speed可按自定义速度滚动

0.1.8

  1. MarqueeX、MarqueeY组件在卸载时移除监听事件

0.1.9

  1. 更改跑马灯滚动形式