Marquee 跑马灯

跑马灯组件，跑马灯组件实现消息轮播提示

效果

使用方法

<template>
    <div class="lc-demo">
 
        <lc-title title="跑马灯"></lc-title>
        <category title="跑马灯"></category>

            
        <lc-marquee 
            :marqueeList="marqueeList" 
            :marqueeStyle="marqueeStyle" 
            :interval="3000">
        </lc-marquee>

    </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
	components: { LcTitle, Category },   
     data () {
        return {
           marqueeList: [
                {  info: '1广州', icon:"images/icon/loading.png",link:"http://www.baidu.com" },
                {  info: '2上海', icon:"images/icon/radio.png"},
                {  info: '3重庆', icon:"images/icon/rater.png",link:"http://www.w3school.com.cn/js/js_array_methods.asp"},
                {  info: '4北京', icon:"images/icon/result.png"},
            ],
            marqueeStyle:{
                height:30, //高度
                color:"#fff", //文字颜色
                backgroundColor:"#ccc" //背景色
            }
        }
    },

    methods: {
    }
  };
</script>
<style scoped>

</style>

可配置参数

Prop	Type	Required	Default	Description
marqueeStyle	Object	N		样式配置 *注1
interval	Number	N	2000	消息展示时长
marqueeList	Array	y	-	包含icon图标 与 link跳转 的消息

• 注1：样式可配如下

  marqueeStyle:{
    height:30, //高度
    color:"#fff", //文字颜色
    backgroundColor:"#ccc" //背景色
  }