DetailTabs.vue
2.61 KB
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
<template>
<div class="tab_list" ref="tabList">
<div class="all" v-if="isShowCollapse" @click="changeCollapse">
<span>{{isShowAll ? '全部' : '收起'}}</span>
<img :src="isShowAll ? require('@/assets/icon/all.png') : require('@/assets/icon/up_arrow.png')" alt="">
</div>
<span class="li" v-for="(item,index) in tabList" :key="index" :class="{active: index==isActive}" @click="switchTab(index,item.text)">{{item.text}}</span>
</div>
</template>
<script>
export default {
name: 'DetailTabs',
data() {
return {
isActive: -1,
tabList: [{
id: '1',
text: '募集说明书',
}, {
id: '1',
text: '募集说',
}, {
id: '3',
text: '募集说明书哈',
}, {
id: '4',
text: '募集哈哈',
}],
isShowCollapse: false, // 是否展示全部按钮
isShowAll: true // 全部和收起状态切换
}
},
mounted() {
this.isShowAllButton()
},
methods: {
// 处理是否显示 全部按钮 当tab当字数超过17字符时候 展示全部按钮
isShowAllButton() {
let result = '';
for (let i = 0; i < this.tabList.length; i++) {
result += this.tabList[i].text
}
if (result.length > 17) {
this.isShowCollapse = true
}
},
switchTab(index, type) {
this.isActive = index
this.$emit('type', type)
},
changeCollapse() {
this.isShowAll = !this.isShowAll
if (!this.isShowAll) {
this.$refs.tabList.style.height = 'auto';
this.$refs.tabList.style.overflow = 'inherit';
} else {
this.$refs.tabList.style.height = '47px';
this.$refs.tabList.style.overflow = 'hidden';
}
}
}
}
</script>
<style lang="less" scoped>
.tab_list {
position: relative;
display: flex;
flex-wrap: wrap;
justify-items: center;
align-items: center;
padding: 10px 20px 10px 0;
height: 53px;
overflow: hidden;
.all {
position: absolute;
top: 0;
right: 2px;
z-index: 9;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 10px;
span {
color: #666;
font-size: 10px;
line-height: 14px;
}
img {
width: 12px;
height: 12px;
margin-top: 2px;
}
}
.li {
padding: 6px 10px;
background-color: #fff;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
color: #666;
border-radius: 4px;
&.active {
color: #135faa;
background-color: rgba(37, 163, 223, 0.1);
border: 1px solid rgba(16, 106, 188, 1);
}
}
}
</style>