noticebar

• 作者：kanghongyan
• 邮箱：[email protected]
• 版本：1.0.3

介绍

顶部滚动提示

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-noticebar --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

• 待开发

使用

最少配置参数为：

• 传入content增加内容

<Noticebar 
    canClose={true}
    autoPlay={true}
>
   <ScrollV>
       <p>内容1</p>
       <p>内容2</p>
   </ScrollV>
</NoticeBar>

<Noticebar 
    canClose={true}
    autoPlay={true}
>
   <ScrollH>
       <p>内容2</p>
   </ScrollH>
</NoticeBar>

• 传入noticeType增加提示的类型 text(普通的蓝色提示) | tips(暖色的温馨提示) | warning（偏粉色的警告）

<Noticebar 
    canClose={true}
    autoPlay={true}
    noticeType={'text'}
>
    <p>内容2</p>
</NoticeBar>

配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | initShow | boolean | true | 显示隐藏 | | canClose | boolean | false | 是否有右侧的关闭按钮 | | children | node | 20 | 滚动的内容 | | className | string | 20 | 样式 | | hasIcon | boolean | 20 | 是否显示左边喇叭按钮 | | itemHeight | number | 20 | 每一条内容的高度，默认20px | | closeCb | func | () => {} | 点击关闭回调 | | onClick | func | () => {} | 点击整个notice | | hasArrow | boolean | false | 是否有右侧箭头 | | noticeType | string | '' | 使用默认提供的几种类型text(普通的蓝色提示)，tips(暖色的温馨提示)，warning（偏粉色的警告）| |

ScrollV配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | speed | number | 3000 | 停留时间 | | useLineHeight | bool | false | 当单行内容过长时，用lineHeight表示高度 |

ScrollH配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | speed | number | 1.0 / 30 | 速度，1s移动30px | | startPosition | number | 0% | 初始位置 | | loopPosition | array | [] | 循环起始位置, eg: ["0%", "100%"] |

注意事项

• 组件注意事项

开发调试

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

npm run start

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

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

1.0.3

1. 增加了一个属性noticeType， 提供了三种默认值。text(普通提示) | tips(温馨提示) | warning（警告提示）