Lm-toptips NPM

toptips

作者：liuduan
邮箱：liuduan.05.05@163.com
版本：0.3.1

介绍

吸顶提示信息条

安装

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>

设置水平向文字显示状态

    <Toptips loopX={false}>{test}</Toptips>

设置竖直向文字显示状态

    <Toptips
        loopY={false}
        typeY={'nonauto'}
        speedY={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`	`null`	图标元素
`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`	`() => {}`	点击关闭或者操作区域的回调函数
`typeX`	`String`	`'marquee'`	水平方向:显示类型跑马灯：`'marquee'`显示...：`'ellipsis'`修剪文本：`'clip'`折行：`'break'`
`speedX`	`Number`	`60`	水平方向:动画移动距离/每秒
`startDelayX`	`Number`	`800`	水平方向:动画单次播放开始延时时间
`endDelayX`	`Number`	`0`	水平方向:动画单次播放结束停留时间
`loopX`	`Bool`	`true`	水平方向:是否循环播放
`typeY`	`String`	`'marquee'`	垂直方向:滚动类型自动：`'marquee'`手动：`'nonauto'`
`speedY`	`Number`	`15`	垂直方向:动画移动距离/每秒, 若不传或传数字0则按浏览器重绘刷新频率
`startDelayY`	`Number`	`800`	垂直方向:动画单次播放开始延时时间
`endDelayY`	`Number`	`0`	垂直方向:动画单次播放结束停留时间
`loopY`	`Bool`	`true`	垂直方向:是否循环播放

注意事项

当期望多列滚动显示时，children属性类型应为Array，且如果Array中元素如果为DOM，必须设置key属性，示例：

    testList: [
            '珍爱信用，如实填写，我们承诺对您的信息绝对保密',
            '该密码可用于申请或体现',
            <div key={0}>欢迎拨打<a>58同城客户服务热线：58585858</a>需要设置key属性</div>,
            <p key={1}>该密码可用于申请或体现该密码可用于申请或体现该密码可用于申请或体现该密码可用于申请或体现</p>
    ]