# NoticeBar 通告栏

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iNoticeBar from 'iview-mpvue/dist/components/notice-bar/notice-bar'
    export default {
        components: {
            'i-notice-bar': iNoticeBar
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/notice-bar/style/css'
```

## 示例

```markup
<i-notice-bar>
    2018年世界杯,将于6月14日至7月15日举行
</i-notice-bar>
</i-panel>
<i-panel title="自定义颜色 通告栏">
    <i-notice-bar backgroundColor="#99cc66" color="#ffff66">
        2018年世界杯,将于6月14日至7月15日举行
    </i-notice-bar>
</i-panel>
<i-panel title="icon 通告栏">
    <i-notice-bar icon="systemprompt">
        2018年世界杯,将于6月14日至7月15日举行
    </i-notice-bar>
</i-panel>
<i-panel title="关闭 通告栏">
    <i-notice-bar icon="systemprompt" :closable="true">
        2018年世界杯,将于6月14日至7月15日举行
    </i-notice-bar>
</i-panel>
<i-panel title="滚动 通告栏">
    <i-notice-bar icon="systemprompt" :loop="true">
        2018年世界杯,将于6月14日至7月15日举行;2018年世界杯,将于6月14日至7月15日举行;
    </i-notice-bar>
    <i-notice-bar icon="systemprompt" :loop="true" speed="200">
        2018年世界杯,将于6月14日至7月15日举行;2018年世界杯,将于6月14日至7月15日举行;
    </i-notice-bar>
 </i-panel>
```

## API

NoticeBar properties

| 属性               | 说明           | 类型      | 默认值     |
| ---------------- | ------------ | ------- | ------- |
| i-class          | 自定义 class 类名 | String  | -       |
| closable         | 是否显示关闭按钮     | Boolean | false   |
| icon             | 自定义图标        | String  | -       |
| loop             | 文字是否滚动显示     | Boolean | false   |
| background-color | 背景色          | String  | #fefcec |
| color            | 字体及图标颜色      | String  | #f76a24 |
| speed            | 滚动速度         | Number  | 1000    |