页面效果
<template>
<div class="aboutMe">
<div v-if="isline3">
<div :class="isHidden ? 'conents conentHidden' : 'conents'">
{{ aboutMeData }}
</div>
<div v-if="isHidden" class="btn" @click="isHidden = false">更多</div>
<div v-else class="btn" @click="isHidden = true">收起</div>
</div>
<div v-else>
<div ref="element" class="conents">{{ aboutMeData }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
},
data() {
return {
aboutMeData:'会发生纠纷高卡输入法街道发生刷卡房价低首付内容假口袋大喊大叫爱斯达克静安寺狄淇儿9建设涨跌幅发生刷卡房价低首付内容假口袋大发生刷卡房价低首付内容假口袋大喊大叫爱斯达克静安寺狄淇儿9建设涨跌幅发生刷卡房价低首付内容假口袋大喊大叫爱斯达克静安寺狄淇儿9建设涨跌幅季后赛',
isHidden: true,
isline3: false, // 为大于3
};
},
watch: {
aboutMeData() {},
},
mounted() {
this.$nextTick(() => {
const line = this.$refs.element.offsetHeight / 20;
if (line > 3) {
this.isline3 = true;
}
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
.aboutMe {
width: 350px;
margin: 16px auto 16px auto;
.conents {
width: 350px;
font-size: 15px;
font-family: SFUIText-Light, SFUIText;
font-weight: 300;
color: var(--color1);
line-height: 20px;
// margin-top: 10px;
word-break: break-all;
}
.conentHidden {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 3;
}
.btn {
font-size: 15px;
font-family: SFUIText-Light, SFUIText;
font-weight: 300;
color: #6185ff;
line-height: 18px;
text-align: right;
}
}
</style>
