## NoticeBar 通告栏

### 基本用法

```html
<v-noticebar :text="noticeShort"></v-noticebar>

<v-noticebar>{{noticeLong}}</v-noticebar>
```
```javascript
export default {
  data() {
    return {
      noticeShort: '京东 JUI 组件库 NoticeBar 组件',
      noticeLong: '京东 JUI 组件库 NoticeBar 组件 如果内容超出可视宽度时可滚动... ',
    };
  },
}
```

### 没有关闭按钮模式
`closeable` 属性为 `Boolean` 值， 控制是否有关闭按钮，`true` 为有关闭按钮(默认)，`false` 为没有关闭按钮
```html
<v-noticebar
  :text="noticeLong"
  :closeable="false"
>
</v-noticebar>
```

### 禁止滚动
`scrollable`属性为 `boolean` 值，控制内容长度超出可视区域宽度是否自动滚动，`true` 为滚动(默认)，`false` 为不滚动。
`icon` 属性可以为左侧增加一个图标。可支持的内置图标名称见 `icon` 组件。

```html
<v-noticebar
  :text="noticeLong"
  :scrollable="false"
  :icon="warn-empty"
>
</v-noticebar>
```

### 调整滚动速度（px/s）
设置 `speed` 值可以改变滚动速度，他的值代表每秒滚动多少px，比如设置 `speed` 为 `50`，意味着每秒滚动 `50px`，默认为 `50`;

```html
<v-noticebar
  :text="noticeLong"
  :speed="30"
>
</v-noticebar>
```

### 调整背景颜色、字体颜色、图标颜色
用户可以自定义调整 notice-bar 组件的颜色。
`background`、`color`、`iconColor` 分别设置背景色、字体颜色、图标颜色，值为 `Srting` 类型。

```html
<v-noticebar
  :text="noticeShort"
  icon="warn-full"
  background="#ffdddd"
  color="red"
  iconColor="red"
>
</v-noticebar>
```

### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| text  | 文案  | String   |    | 空字符串 |
| icon  | 左侧图标 图标名  | String   |    | 空 |
| closeable  | 是否有关闭按钮   | Boolean   | true, false   | true |
| scrollable  | 文案内容超出可视区域宽度后是否自动滚动  | Boolean   | true, false | true |
| speed | 滚动的速度(px/s)    | Number   | 正整数 | 50 |
| background  | 背景颜色    | String   |  | '#fbf8d9' |
| color  | 字体颜色    | String   |  | '#df6f33' |
| iconColor  | 图标颜色    | String   |  | '#df6f33' |