简单原理

• 在vue中不改变dom结构的情况下，实现简单的文本展开收起操作。
• 遍历列表中文本是否超过固定高度，超过高度，则对文字进行折叠，显示“展开”按钮。
• 点击展开按钮，显示全部文本，并展示“收起”按钮。
• 展开和收起按钮实现相应功能。

效果展示

• 遍历数据，判断是否展示按钮
  
• 点击展开按钮，展开文本，并显示‘收起’按钮
  

代码结构

dom 结构

<div class="description">
 	<a :href="item.link" @click='checkDetail' class="content-detail">{{item.content}}</a>
      <span class="more-txt" @click="more">展开</span>
      <span class="close-more" @click="close">收起</span>
</div>

css部分

这个方法主要是不改变dom结构，通过css对样式进行控制。

.description {
    font-size: 14px;
    text-align: justify;
    line-height: 23px;
    position: relative;

    &.list-more {
        .content-detail {
            display: inline-block;
            color: #333333;
            height: 92px;
            overflow: hidden;
        }
        .more-txt{
            display: block;
        }
        .close-more {
           display: none;
        }
    }

    &.list-close {
        .content-detail {
            display: inline-block;
            color: #333333;
            height: auto;
        }
        .more-txt{
            display: none;
        }
        .close-more {
            display: block;
        }
    }
    .more-txt {
        display: none;
        width: 50px;
        text-align: right;
        background-color: #fff;
        color: #5188A6;
        float: right;
        position: absolute;
        right: 0;
        margin-top: -22px;
        background: url('') no-repeat;
        background-size: 100% 100%;
    }
    .close-more {
        display: none;
        width: 40px;
        text-align: center;
        background-color: #fff;
        color: #5188A6;
        float: right;
        position: absolute;
        right: 0;
        margin-top: -22px;
        background-image: url('')
    }
}

遍历数据

var listUrl = 'https://****';
axios.get(listUrl, {
   params: {
       timesort: this.time_sort
   }
}).then(res => {
	if (res.data.error_code === 0) {
		this.list = res.data.data;
		if (this.list.rows && this.list.rows.length) {
			this.listData = this.listData.concat(this.list.rows);
			// 展开收起
			this.$nextTick(() => {
			/* 获取文本所在的div */
				let contentDom = document.querySelectorAll('.content-detail');
				contentDom = [...contentDom];
				console.log(contentDom);
			// 遍历div,判断高度,是否添加‘展开’按钮
				contentDom.forEach((item, index) => {
				let height = item.offsetHeight;
				if (height > 92) {
				// 超过高度，给该文本的父元素添加class

					this.addClass(item.parentNode, 'list-more');
				}
			});
			
			 // 此处为跳转到列表页有锚点定位的情况下使用
			let contentId = this.queryLinkParams('content_id');
			if (contentId) {
			document.getElementById(contentId).scrollIntoView();
			}
		});

添加点击事件

在methods中添加方法，实现父元素添加class和删除class,实现展开收起的功能。

        // 查看更多
        more (event) {
            this.addClass(event.target.parentNode, 'list-close');
        },
        // 收起文本
        close (event) {
            this.removeClass(event.target.parentNode, 'list-close');
        },
        hasClass (obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        },
        addClass (obj, cls) {
            if (!this.hasClass(obj, cls)) obj.className += ' ' + cls;
        },
        removeClass (obj, cls) {
            if (this.hasClass(obj, cls)) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        },

总结

不改变dom 结构的情况下，简单通过css来对文本进行控制，实现功能。