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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
| <template>
| <footer-scroll
| :data="datas"
| :class-option="classOption"
| ref="root"
| class="breaker-alarms"
| >
| <div class="list">
| <div
| class="item"
| v-for="(item, idx) in datas"
| ref="item"
| :key="'list_' + idx"
| >
| <div v-if="!item.isEmpty">{{ item.content }}</div>
| <div v-else :style="{ width: item.width + 'px' }"></div>
| </div>
| </div>
| </footer-scroll>
| </template>
|
| <script>
| import FooterScroll from "@/components/FooterScroll";
|
| export default {
| name: "",
| props: {
| list: {
| type: Array,
| default() {
| return [];
| },
| },
| },
| data() {
| return {
| datas: [],
| disArr: [],
| distanceWid: null,
| classOption: {
| limitMoveNum: 0,
| direction: 2,
| step: 1,
| },
| };
| },
| watch: {
| list: {
| handler(val) {
| this.$nextTick(() => {
| this.datas = JSON.parse(JSON.stringify(val));
| var item = this.$refs.item;
| var arr = [];
| // 因为设置的margin值一样，所以取第一个就行。
| var margin = 0;
| if (item && item.length > 0) {
| margin = this.getMargin(item[0]);
| }
| if (this.datas.length > 0) {
| this.datas = this.datas.map((jtem, i) => {
| let obj = {};
| if (jtem) {
| obj.isEmpty = false;
| obj.content = jtem + "跳闸";
| }
| if (item && item.length > 0) {
| arr.push((item[i]?.clientWidth || 0) + margin); // 把宽度和 margin 加起来就是每一个元素需要移动的距离
| }
| return obj;
| });
| }
| this.disArr = arr;
| let allWidth = 0;
| if (this.disArr.length > 0) {
| this.disArr.map((item, i) => {
| if (i > 0) {
| allWidth += item;
| }
| });
| }
| // console.log(allWidth, this.datas, "2443");
| let rootW = this.$refs.root.$el.clientWidth;
| if (allWidth < rootW) {
| this.distanceWid = rootW - allWidth;
| // 如果长度不够就补充一个空li撑满整屏
| this.datas.push({
| isEmpty: true,
| width: this.distanceWid,
| });
| }
| // console.log(this.datas, "345");
| // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
| this.$refs.root.reset();
| });
| },
| immediate: true,
| },
| },
| components: {
| FooterScroll,
| },
| methods: {
| // 获取margin属性
| getMargin(obj) {
| var marg = window.getComputedStyle(obj, null)["margin-right"];
| marg = marg.replace("px", "");
| return Number(marg); // 强制转化成数字
| },
| },
|
| mounted() {},
| };
| </script>
|
| <style scoped>
| .breaker-alarms {
| /*color: #D7BC8D;*/
| overflow: hidden;
| color: #000;
| height: 100%;
| /*background: #422b02;*/
| }
|
| .list {
| white-space: nowrap;
| display: flex;
| align-items: center;
| }
|
| .item {
| margin-right: 25px;
| display: inline-block;
| font-size: 0.6rem;
| cursor: pointer;
| position: relative;
| }
| </style>
|
|
