vue组件-文字太多出现展开收起按钮或者hover的时候展示全部，没有的情况下默认展示

说明：
组件封装了两种情况：
1：超过有省略号，有展开收起按钮
2.超过部分省略号，并且hover的时候有提示，没有展开收起按钮

调用：

/**
title:显示的内容
lineHeight:单行的行高
eclipse: 第几行出现省略号
ishasOpenBtnType: 字符串，默认为1
                  1：超过有省略号，有展开收起按钮
                  2.超过部分省略号，并且hover的时候有提示，没有展开收起按钮
**/
<eclipse :title="title" lineHeight="18" eclipse="3" ishasOpenBtnType="1">
</eclipse>

组件完整代码：

<template>
    <div class="eclipse_contain">
        <div v-if="ishasOpenBtnType == '1' || !ishasOpenBtnType">
            <div v-if="(!ifMore && !isOpen) || (ifMore && isOpen)" class="normal_content" ref="ellipse" :style="{'line-height':lineHeight+'px'}">
                {{title}}
            </div>
            <div v-if="ifMore && isOpen" class="ellipsisLine2" :style="{'line-height':lineHeight+'px','-webkit-line-clamp':eclipse}">
                {{title}}
            </div>
            <div class="btn_group" v-if="ifMore">
                <span v-if="isOpen" @click="closeH">收起</span>
                <span v-else @click="openH">展开</span>
            </div>
        </div>
        <div v-else>
            <div v-if="!ifMore" class="normal_content" ref="ellipse" :style="{'line-height':lineHeight+'px'}">
                {{title}}
            </div>
            <el-tooltip v-if="ifMore" class="item" effect="dark" :content="title" placement="top">
                <div class="ellipsisLine2" :style="{'line-height':lineHeight+'px','-webkit-line-clamp':eclipse}">
                    {{title}}
                </div>
            </el-tooltip>
        </div>
    </div>
</template>
<script>
export default {
    name:"eclips",
    props:{
        title:String,
        lineHeight:String,
        eclipse:String,
        isShow:Boolean,
        ishasOpenBtnType:String,
    },
    data(){
        return {
            ifMore:false,//是否超过高度
            isOpen:false,//是否已经展开
        }
    },
    watch:{
        title(newVal,oldVal){
            this.getHeight();
        }
    },
    methods:{
        getHeight(){
            if(this.$refs.ellipse.clientHeight > Number(this.lineHeight)*Number(this.eclipse)){
                this.ifMore = true;
            }else{
                this.ifMore = false;
            }
        },
        closeH(){
            this.isOpen = false;
        },
        openH(){
            this.isOpen = true;
        },
    },
    mounted(){
        this.getHeight();
    }
}
</script>
<style scoped lang="scss">
.eclipse_contain{
    width:100%;
    display:table;
}
.normal_content{
    width:100%;
    white-space: normal;
    display: -webkit-box;
    word-break: break-all;
}
.ellipsisLine2{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.btn_group{
    width:100%;
    span{
        float:right;
        color:#4c88bd;
        cursor: pointer;
        font-size:12px;
        margin-right:10px;
    }
}
</style>

效果图：
第一种展开收起按钮：

第二种：文字太长展示省略号，hover的时候显示所有