uniapp实现消息展示收起

									<view class="contents" :class="{'is':selected==index}" @click="toggle(index)"
										v-if="item.txt">
										{{item.txt}}
										<text class="unfold" v-if="(getChartLength(item.txt)>110&&(!item.flag))">...展开</text>
										<text class="pack" v-if="item.flag">收起</text>
									</view>

selected：-1，
commentList: [{
					txt: "这个文档看完收益很多。这个文档看完收这个文档看完收益很多。这个文档看完收这个文档看完收益很多。这个文档看完收这个文档看完收益很多。"
				}, {
					txt: "这个文档看完收益很多"
				}]





			toggle(index) {
				this.commentList[index].flag = !this.commentList[index].flag;
				if (this.commentList[index].flag) {
					this.selected = index;
					console.log(this.selected);
				} else {
					this.selected = -1;
				}
			},

           //通过字节长度判断何时显示 展开
		   getChartLength(value){            
		   	 var w = 0;             
		    	//length 获取字数数，不区分汉子和英文           
		   	  for (var i=0; i<value.length; i++) {                
		    		 	 //charCodeAt()获取字符串中某一个字符的编码                
		       		var c = value.charCodeAt(i);                
		       		 //单字节加1               
		          	if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {     
		                       w++;                
		                  } else {
		                       w+=2;               
		           		 }            
		                 }       
		                    return w          // w为value的字节长度   
		    },

					.contents {
						position: relative;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #B6B6B7;
						line-height: 39rpx;
						margin-top: 31rpx;
						white-space: pre-wrap;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}

	.is {
		-webkit-line-clamp: 100 !important;
	}