vue 控制文本展開收起

簡單原理

• 在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來對文本進行控制，實現功能。