vue循环遍历出的文本展开收起效果

深碍√TFBOYSˉ_ 2022-11-19 07:55 342阅读 0赞

超出三行只显示三行，第三行末尾处显示展开，点击展开显示全部文本，末尾处显示收起。

<div class="chat-item" v-for="(itemson, index1) in item.talkContent" :key="index1">
        
    	<div :class="chooseId == item.talkTechniqueId.toString() + index1  ? 'textName' : textList.includes(item.talkTechniqueId.toString() + index1  ) ?  'selected'  :  'textName'  ">
    		<div class="titleText" :id="'text' + item.talkTechniqueId + index1" v-html="formatEmoji(fontShow(itemson.text))"></div>
    		<span class="textBtn"
    			:class="
    			chooseId !== item.talkTechniqueId.toString() + index1 ? 'down' : 'bt20' " @click="unfold(item, index1)" v-if=" textList.includes( item.talkTechniqueId.toString() + index1 ) 
    		 ">
    		{
       { chooseId !== item.talkTechniqueId.toString() + index1 ? "展开"  : "收起"}}
    		</span>
    	</div>
    </div>
    chooseId: "", //展开收起判断
    textList: [],
    methods: {
      //展开收起
    	unfold (item, index1) {
    		let val = item.talkTechniqueId.toString() + index1;
    		if (this.chooseId != val) {
    			this.chooseId = val;
    		} else {
    			this.chooseId = null;
    		}
    	}
    	 setTextMsg () {
          // console.log('调用了 setTextMsg')
          this.$nextTick(() => {
            for (let index = 0; index < this.chatData.length; index++) {
              let item = this.chatData[index];
              for (let y = 0; y < item.talkContent.length; y++) {
                if (item.talkContent[y].materialType == 1) {
                  let name = item.talkTechniqueId.toString() + y + "";
                  this.checkText(name);
                }
              }
            }
          });
        },
        checkText (name) {
          let _this = this;
          this.$nextTick(() => {
            let id = "text" + name;
            let textCon = document.getElementById(id);
            //总的高度除以行高
            let totalHeight = textCon.offsetHeight;
            let HtmlFontSize = (
              parseInt(document.getElementsByTagName("html")[0].style.fontSize) *0.55
            ).toFixed(2);
            if (totalHeight / parseFloat(HtmlFontSize) > 3) {
              _this.textList.push(name);
            }
          });
        },
      }
    <style>
    .selected {
    	width: 280px;
    	line-height: 20px;
    	position: relative;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 3;
    }
    .textName {
    	 width: 280px;
    	 position: relative;
    	 line-height: 20px;
    	 word-wrap: break-word;
    	.statusText {
    		overflow: hidden;
    		display: block;
    	}
    	.statusText:after {
    		 content: '';
    		 position: absolute;
    		 bottom: 0;
    		 right: 2px;
    		 width: 48px;
    		 padding-left: 30px;
    		 background: linear-gradient(
    		   to right,
    		   rgba(255, 255, 255, 0.2),
    		   #fff 45%
    		 );
    	}
    }
    .down {
    	&::after {
    	content: '...';
    	position: absolute;
    	left: 0;
    	color: #333333;
    	}
    }
    .bt20 {
    	bottom: -16px;
    }
    </style>

1.item.talkTechniqueId.toString() + index1		为Id和下标拼成的唯一标识
    2.item.talkContent[y].materialType == 1			类型为文本
    3.若不需要表情显示，可以将类名为titleText的div替换为{
       { itemson.text }}
    3.toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字。num规定小数的位数，是 0 ~ 20 之间的值
    4.parseFloat(string) 函数可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
    5.parseInt(string) 函数可解析一个字符串，并返回一个整数。