lm-noticebar/README.md

* 作者：kanghongyan * 邮箱：khongyan@gmail.com * 版本：**`1.0.3`**

# noticebar

* 作者：kanghongyan
* 邮箱：khongyan@gmail.com
* 版本：**`1.0.3`**

## 介绍

_顶部滚动提示_

---

## 安装

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

```
npm i lm-noticebar --save
```

- 如果你还没有安装 `npm`，可通过以下方式进行 [安装](https://nodejs.org/en/download/)。
- 安装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 组件开发规范](http://)

---

## Changelog

### 0.1.0
1. init

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