1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <template>
| <vue-seamless-scroll :data="listData" :class-option="classOption" ref="seamlessScroll">
| <div class="scroll-list">
| <table>
| <tbody>
| <tr v-for="(item, index) in listData" :key='index' class="scroll-item" @click="clickItem(item)">
| <td>{{item.stationname}}</td>
| <td>{{item.alm_start_time}}</td>
| <td>{{item.alarmname}}</td>
| </tr>
| </tbody>
| </table>
| </div>
| </vue-seamless-scroll>
| </template>
|
| <script>
| import vueSeamlessScroll from 'vue-seamless-scroll';
| export default {
| name: "dataScroll",
| components: {
| vueSeamlessScroll,
| },
| props: {
| list: {
| type: Array,
| default() {
| return [];
| }
| },
| },
| data() {
| return {};
| },
| methods: {
| clickItem(data) {
| console.log(data);
| }
| },
| computed: {
| classOption() {
| return {
| step: 0.2, // 数值越大速度滚动越快
| limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
| hoverStop: true, // 是否开启鼠标悬停stop
| direction: 1, // 0向下 1向上 2向左 3向右
| openWatch: true, // 开启数据实时监控刷新dom
| singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
| singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
| waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
| }
| },
| listData() {
| return this.list.map(item=>{
| return {
| isNew: item.isNew,
| stationname: item.stationname.split("-")[3],
| alm_start_time: item.alm_start_time,
| alarmname: item.alarmname
| };
| });
| }
| }
| }
| </script>
|
| <style scoped>
| .scroll-item {
| white-space: nowrap;
| font-size: 14px;
| padding: 4px 16px;
| }
| .scroll-list {
| padding: 0 16px;
| }
| .scroll-item {
| cursor: pointer;
| }
| .scroll-item td {
| padding: 4px 8px;
| }
| .scroll-item .img {
| width: 32px;
| height: 14px;
| }
| </style>
|
|
