Marquee 封装组件-跑马灯
封装说明
该组件以
:props
形式广播需要滚屏的消息内容。你无需在使用滚屏组件时进行动效处理,仅需向
<Marquee />
组件传递绑定props
对象即可。
该 Marquee
由 nj_zuoyang 完成封装。
例
(基础使用)
<template>
<marquee v-if="isShowMarquee" :marquee-list="priceList" />
</template>
<script>
export default {
data() {
return {
isShowMarquee: true,
priceList: [
'A公司成交15000元',
'B公司成交17000元',
'C公司成交13000元',
]
}
}
}
</script>
内置属性
Marquee
提供了一些开放属性:
属性 | 说明 | 类型 | 是否必传 | 默认值 |
---|---|---|---|---|
speed | 设定滚动速度 | Number | 否 | 30 |
marqueeList | 滚屏内容 | Array | 是 | 无 |
注意事项
marqueeList
必须为[String, string]
,不可传[Object, Object]
。有时你会遇到因调用远端数据而造成组件渲染错误,解决方法:为组件添加
v-if
属性,接口调用完毕后将其置为true
。