效果
<template><div ref="txttype" class="bottom"><div :class="hidetext==true?'room_intro showEllipsis':'room_intro'">{{content}}</div><span class="btnWrap" v-if="nomore" @click="lookmore"><a class="more">{{moretext}}<i :class="hidetext==false?'el-icon-arrow-up':'el-icon-arrow-down'"></i></a></span></div></template><script>export default ({name: 'ellipsisText',props: {//父组件传过来的文本content: {type: String,default: ''},},data() {return {moretext: '查看更多',nomore: true,hidetext: false,}},mounted() {//通过ref获取对应dom节点的高度，注意20为单行时的高度let hei = this.$refs.txttype.clientHeight;//当获取的高度大于20时，即当前文本为多行，设置添加收起文本的class，//当获取的高度等于20时，隐藏查看更多按钮if (hei > 20) {this.hidetext = truethis.nomore = true} else if (hei == 20) {this.nomore = false}},methods: {//查看更多lookmore() {this.hidetext = !this.hidetextthis.moretext = this.hidetext == true ? '查看更多' : '收起'},}})</script><style lang="scss" scoped>.bottom {margin-top: 12px;position: relative;// .Flex();.room_intro {flex:1;font-size: 14px;font-weight: 400;line-height: 20px;text-align: justify;}.showEllipsis{// 文本溢出超出两行显示省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;}.btnWrap {align-self: flex-end;cursor: pointer;}}</style>
