这个主要是通过this.$refs.desc.offsetHeight获取简介高度是否超过3行,超过三行的高度则说明有被隐藏的部分,查看更多的按钮就会展示出来;
<template>
<div>
<div class="container">
<div class="tooltip" v-show="tooltipShow">{{desc}}</div>
<div class="desc">
<span ref="desc">{{desc}}</span>
<div class="desc_btn" v-show="btnShow" @mouseenter="tooltipShow = true" @mouseleave="tooltipShow = false">查看更多 >></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tooltipShow: false,
btnShow: false,
desc: '君不见黄河之水天上来,奔流到海不复回。君不见高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。'
};
},
mounted () {
if (this.$refs.desc.offsetHeight > 70) {
this.btnShow = true;
}
}
};
</script>
<style lang="scss" scoped>
.container{
width: 400px;
margin: 200px auto;
position: relative;
.tooltip{
width: 432px;
position: absolute;
right: 0px;
bottom: 50px;
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.15);
border-radius: 6px;
font-family: Microsoft YaHei UI;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
z-index: 100;
&::after{
content: ' ';
width: 30px;
height: 30px;
background: #fff;
box-shadow: 9px 10px 16px rgba(0, 0, 0, 0.15);
transform: rotate(45deg);
position: absolute;
bottom: -14px;
left: 80%;
}
}
.desc{
margin-top: 18px;
font-family: Microsoft YaHei UI;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 22px;
color: rgba(0, 0, 0, 0.6);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
height: 70px;
-webkit-box-orient: vertical;
position: relative;
.desc_btn{
position: absolute;
right: 0px;
bottom: 0px;
color: #14C393;
padding: 0 10px;
background:#fff;
cursor: pointer;
}
}
}
</style>