vue实现显示两行，溢出显示省略号，点击实现展开收缩效果

页面内容

<template>
    <div class="query">
        <div class="formContent">
           查询关键字：
            <el-input v-model="state" placeholder="请输入查询关键字" :input="query()" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <div class="text more" ref="more">
            占位
        </div>
        <div class="listContent">
            <div class="listItem" v-for="(item,index) in dataList" :key="index">
                <div class="listItemTitle">
                    {{item.title}}
                </div>
                <div class="text">
                    <!--@click="toggle(index,item.status)"-->
                    <div :class="{\'listItemDesc\': item.status}" :style="{\'max-height\':item.status ? textHeight: \'\'}" ref="textContainer" @click="calculateText(index)">
                        <div v-html="item.content">
                        </div>
                    </div>
                    <!--<div class="btn">
                        <p v-if="item.status" @click="item.status = false">展开</p>
                        <p v-if="item.status == false" @click="item.status = true">收起</p>
                    </div>-->
                </div>
            </div>
        </div>
    </div>
</template>

js部分

<script>
    var oldLen = -1;
    export default {
        name: "index",
        data(){
            return{
                state:\'\',
                dataList:[
                    {
                        \'title\':\'标题1\',
                        \'content\':\'内容1\'
                     },
                     {
                        \'title\':\'标题2\',
                        \'content\':\'内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2\'
                     },
                ],
                textHeight: null
            }
        },
        methods:{
            // 计算文字 显示展开 收起
            calculateText(index) {
                // 获取一行文字的height 计算当前文字比较列表文字
                let oneHeight = this.$refs.more.scrollHeight;
                let twoHeight = oneHeight * 2 || 60;//设置的行高的两倍，这里设置的行高为30px
                this.textHeight = `${twoHeight}px`;
                let txtDom = this.$refs.textContainer;
                if(index > -1){
                    let curHeight = txtDom[index].offsetHeight;
                    if (curHeight > twoHeight) {
                        this.$set(this.dataList, index, Object.assign({}, this.dataList[index], {status: true}))
                    } else {
                        this.$set(this.dataList, index, Object.assign({}, this.dataList[index], {status: null}))
                    }
                }else{
                    for (let i = 0; i < txtDom.length; i++) {
                        let curHeight = txtDom[i].offsetHeight;
                        if (curHeight > twoHeight) {
                            this.$set(this.dataList, i, Object.assign({}, this.dataList[i], {status: true}))
                        } else {
                            this.$set(this.dataList, i, Object.assign({}, this.dataList[i], {status: null}))
                        }
                    }
                }

            },
            query(){
                let that = this;
                let newLen = this.state.length;
                if(oldLen != newLen){ //每次输入触发事件，不加校验会造成死循环
                    let params = {
                        keyword:this.state
                    };
                    this.$http(\'api\', params).then(function (response) {
                        let res = eval("(" + response + ")");
                        if ("0" == res.ResultCode) {
                            that.dataList = res.DataList;
                            that.dataList.forEach((ele, index) => {
                                that.$set(that.dataList, index, Object.assign({}, ele, { status: null }))
                            })
                            //渲染完执行
                            that.$nextTick(() => {
                                that.calculateText()
                            })
                        } else {
                            that.$notify.error({
                                title: \'错误\',
                                message: "查询失败"
                            });
                            return false;
                        }
                    }).catch((err) => {
                        that.$notify.error({
                            title: \'错误\',
                            message: "" + err
                        });
                        return false;
                    });
                    oldLen = that.state.length;
                }else{
                    return
                }

            },
        },
        mounted(){
            this.dataList.forEach((ele, index) => {
                this.$set(this.dataList, index, Object.assign({}, ele, { status: null })) //给对象添加属性
            })
            //Dom加载完执行
           /* this.$nextTick(() => {
                this.calculateText()
            })*/
            window.onresize= () => {
                this.dataList.forEach((ele, index) => {
                    this.$set(this.dataList, index, Object.assign({}, ele, { status: null }))
                })
                setTimeout(() => {
                    this.calculateText()
                }, 0)
            }
        }
    }
</script>
                            

css部分

<style scoped lang="stylus">
    .query{
        .formContent{
            .el-input{
                width:350px;
                margin-left:20px;
            }
        }
        .more {
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 2px;
            color: #666666;
            visibility: hidden;
        }
        .text {
            position: relative;
            font-size: 14px;
            line-height: 30px;
            letter-spacing: 2px;
            color: #666666;
        }
        .btn{
            position: absolute;
            right:0;
            bottom:0;
            font-size:14px;
            line-height:30px;
            letter-spacing :2em;
            color:#FFAD41;
            cuesor:pointer;
        }
        .listContent{
            margin-top:50px;
            .listItemTitle{
                height:50px;
                line-height:50px;
                font-size:20px;
            }
            .listItemDesc{
                position:relative;
                max-height:60px;
                display:-webkit-box;
                font-size:16px;
                /*height:30px;*/
                line-height:30px;
                max-width: 800px;
                overflow:hidden;
                /*
                text-overflow:ellipsis;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;*/

            }
            .listItemDesc::after {
                  content: "...";      // \'...\'
                  position:absolute;
                  bottom:0;
                  right:0;
                  padding-left:60px;
                  background:-webkit-linear-gradient(left,transparent,#fff 55%);
                  background:-o-linear-gradient(right,transparent,#fff 55%);
                  background:-moz-linear-gradient(right,transparent,#fff 55%);
                  background:linear-gradient(to right,transparent,#fff 55%);
            }

        }
    }
</style>