NoticeBar 通告栏

使用指南

在.vue中引入组件

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

在main.js中引入样式文件

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

示例

<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