结合element的el-tooltip实现文本溢出进行省略，鼠标移入显示全部

 结合element的el-tooltip实现文本溢出进行省略，鼠标移入则显示全部。如果没有出现省略，鼠标移入则不进行浮出显示。

多简单的一个功能，搜了一下其它人写的，写的简直是一言难尽。

<template>
    <el-tooltip effect="light" :disabled="isOmmit" class="el-tooltip-omit">
        <div :style="{ '-webkit-line-clamp': length, 'line-clamp': length }" class="omit" :ref="text">{{ text }}div>
        <template #content>
            <div :style="{ width: showWidth + 'px' }">{{ text }}div>
        template>
    el-tooltip>
template>
  
<script>
export default {
    name: 'CommonOmit',
    emits: ['returnData'],
    components: {
    },
    props: {
        text: String,
        showWidth: {
            default: 300,
            type: Number
        },
        length: {
            default: 6,
            type: Number
        }
    },
    data() {
        return {
            isOmmit: false
        }
    },
    mounted() {
        this.isTextOverflowed()
    },
    methods: {
        isTextOverflowed() {
            this.$nextTick(() => {
                //获取元素
                let element = this.$refs[this.text];
                //判断是否超出行数省略了文字
                let isOverflowed = element.scrollHeight > element.clientHeight;
                if (isOverflowed) {
                    // 文本被省略，鼠标移动再显示全部文本
                    this.isOmmit = false
                } else {
                    // 文本未被省略
                    this.isOmmit = true
                }
            })
        }
    },
    watch: {
    },
    computed: {
    }
 
}
script>
<style scoped>
.omit {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
style>

showWidth:浮出显示全部的文本宽度，

 length：超过多少行就进行省略