【无标题】vue 两行省略 可展开更多 可收起

公司需求 门店介绍两行省略，出现展开按钮，不够两行 展开按钮隐藏。

<script>
 data(){
    expande:true,
 },
 wacth:{
    "shopInfo.description":{
        handler(val){
            let that = this
            that.$nextTick(() =>{
                let lineHeight = 22
                if(thiat.$refs.content && that.$refs.content.offsetHeight > (lineHeight * 
 2)) {
    that.expande = false
    that needShowExpande = true
}else {
    that.expande = true
}
            })
        },
        deep:true,
        immediate:true
    }
}
 metheds:{
    expandeClick(){
        this.expande = !this.expande
    }
}
</script>

html

<div class="storeProfile" v-if="shopInfo.description">

    <div ref="content" :class="['content','expande' ? 'expande':'close'">

        <van-icon name="bullhorn-o" size="16" />

        {{shopInfo.description}} 

    </div>
    <div
        class="expande-button-wrap"
        v-if="needShowExpande"
    >
        <div class="expande-button" @click="expandeClick" v-if="!expande">展开</div>
        <div class="expande-button" @click="expandeClick" v-else>收起</div>
    </div>
</div>

<style lang="scss" scoped>
.storeProfile {
    position: relative;
    padding: $padding-16;
    background: #fff;
    @include border-radius($radius-8);
    margin-bottom: $margin-10;
    .expande {
        height: auto;
    }
}
.close {
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    -ms-text-overflow: ellipsis;
    text-overflow:ellipsis;
}
.expande-button-wrap {
    position:absolute;
    right: 10px;
    bottom: 10px;
    .expande-button {
    margin-bottom: 18px;
    font-size: 18px;
    color: red;
    }

}
</style>