vue轮播表组件（点击暂停）

20220509更新：

添加高度max限制

20220428更新：

发现之前的写法太傻了，数据多一点就会遇到性能问题，已更换另一种实现方式，虚拟滚动，无需全部数据都同时渲染出来。 一些配置会一直完善，有什么想法想要什么功能尽管提（饼先画好hhh）

因业务需要自己写了个vue版轮播表，本来用的别人写的发现不太够用索性自己写了。代码放我GitHub：https://github.com/xxxxxyn/vue-carousel-board

1.点击暂停（时间可设置）

2.鼠标悬浮暂停（也可以不暂停）

3.设置每行的列宽、文字对齐方式（列宽用什么单位都可以）

4.速度调节

5.点击事件获取该行数据

开始

npm install vue-carousel-board

main.js内引入 import CarouselBoard from ‘vue-carousel-board’ Vue.use(CarouselBoard)

那用放哪

<CarouselBoard :originData="listData" />

使用

//列表的数据，数组格式 //data of the list :data=“data” //轮播的配置，详见例子 //config of carouselList, see example for detail :config=‘config’ //example: data:[ { key: 1, row: [ { text: text1 1, key: text1 }, { text: text2 2, key: text2 }, { text: text3 3, key: text3 }, ], }, ], config:{ speed:1,//速度调节，越大越快–Number clickStop:true,//点击是否暂停–Boolean clickStopTime:‘4000’,//点击暂停毫秒数–String columnWidth:[“10vw”,“50px”,“80px”],//各个列宽,要使用什么单位都行–Array textAlign:[“center”,“left”,“left”],//各列文字对齐方式–Array hoverStop:true,//鼠标进入是否暂停 }, //点击获取该行数据事件。接收的第一个参数就是点击行数据 @clickcurrent=‘’