lm-toptips

    0.3.1 • Public • Published

    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>
          ]

    开发调试

    进入项目目录后,使用 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. 更改跑马灯滚动形式

    0.2.0

    1. update react to version 16

    0.3.1

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

    Install

    npm i lm-toptips

    DownloadsWeekly Downloads

    1

    Version

    0.3.1

    License

    none

    Unpacked Size

    72.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • davidfeng
    • maqing01
    • tony-liuduan
    • sherry.cao