ToggleArrowContent.vue
1.86 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
<template>
<div class="toogle_arrow_content">
<span class="common_text" ref="content" :class="{'common_ellipsis': isShowDot}">{{content}}</span>
<span class="common_arrow" ref="arrow" v-if="isShowArrow" @click="handleToggle">></span>
</div>
</template>
<script>
export default {
name: 'ToggleArrowContent',
props: {
content: String,
textMaxLength: {
type: Number,
default: 15
},
},
data() {
return {
isShowDot: false,
isShowArrow: false
}
},
mounted() {
// console.log('this.content.length--', this.content.length);
if (this.content.length > this.textMaxLength) {
this.isShowDot = true // 显示...
this.isShowArrow = true // 显示箭头
this.$refs.content.style.marginRight = '10px'
} else {
this.isShowDot = false // 隐藏...
this.$refs.content.style.marginRight = '0'
}
},
methods: {
handleToggle() {
this.toggle = !this.toggle
if (!this.toggle) {
// 添加省略号
this.isShowDot = true;
this.$refs.arrow.style.transform = 'rotate(90deg)'
this.$refs.content.style.marginRight = '10px'
this.$refs.content.style.textAlign = 'right'
} else {
// 不添加省略号
this.isShowDot = false;
this.$refs.arrow.style.transform = 'rotate(-90deg)'
this.$refs.content.style.marginRight = '10px'
this.$refs.content.style.textAlign = 'left'
}
}
}
}
</script>
<style lang="less" scoped>
.toogle_arrow_content {
position: relative;
}
.common_text {
display: block;
width: 190px;
}
.common_ellipsis {
width: 190px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.common_arrow {
transition: all ease-in-out 0.5s;
transform: rotate(90deg);
margin-left: 10px;
transform-origin: center;
position: absolute;
top: 0;
right: 0;
}
</style>