基于Vue 2.x的 <垂直循环滚动跑马灯> 组件

预览

在线demo

功能:

• 支持通过slot自定义显示的内容（增加点击事件等）
• 可自定宽度，行高
• 可自定义字体颜色和背景色
• 可自定义滚动延迟时间
• 可自定义滚动动效速度

使用:

通过 npm 指令安装:

npm i vue-roll-up --save

在组件中加载:

 import VueRollUp from 'vue-roll-up'

注册组件:

component: {
  VueRollUp
}

接着，在模版文件中定义组件

<vue-roll-up 
  :roll-list="list"
  :width="300"
  :height="65"
  :color="#FF0000"
  :duration="35000"
  :speed="500"
></vue-roll-up>

文档:

属性

属性	描述	类型	默认值
roll-list	需要滚动的数据，数组类型	Array	-
use-slot	设置为true的话可以在模板中使用slot特性	Boolean	false
width	配置滚动的整体宽度	Any	200
height	配置滚动的高度和行高	Any	35
color	设置字体颜色	String	'#333'
bg-color	设置背景色	String	-
duration	设置滚动延迟时间(millisecond)	Number	2000
speed	设置动效速度(millisecond)	Number	1000

通过slot给marquee绑定点击事件:

<vue-roll-up :roll-list="list" :width="300">
  <template v-slot="{ marquee }">
    <span @click="doSth">{{ marquee }}</span>
  </template>
</vue-roll-up>

如发现有任何bug或文档错误请及时联系作者，3Q

作者相关

<如是我闻> - 记录包括设计，前端，后端的个人博客

泡面的个人博客