toptips

• 作者：liuduan
• 邮箱：[email protected]
• 版本：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>
      ]

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

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. 更改跑马灯滚动形式

0.2.0

1. update react to version 16

0.3.1

1. 移除 MarqueeX && MarqueeY 属性，其内部属性被平铺到组件