ElementUI el-toolTip组件封装

目前简单的后台项目主要使用Vue+element+axios来进行开发，针对于日常产出做一下组件的简单封装，并进行记录，以便于后续使用（哈哈，粘贴复制）。

el-toolTip封装

项目中经常会出现文本内容超出的问题，我们会对超出的内容进行省略，输入移入的时候通过弹框来展示全部内容，并可复制弹框中的内容，整个项目会有很多，所以进行简单封装进行复用。

el-toolTip组件封装：

<template>
    <el-tooltip :content="txtInfo" placement="top" effect="light" :disabled="isDisabled">
        <div class="contentnowrap" :class="{isLink: 'link-text'}" @mouseenter="isShowTooltip" @click="linkTo">{{txtInfo}}</div>
    </el-tooltip>
</template>
 
<script>
    export default{
        name: 'ShowTooltips',
        props: {
            txtInfo: {
                type: String,
                default: ''
            },
            isLink: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data(){
            return {
                isDisabled: false
            }
        },
        methods: {
            isShowTooltip(e){
                let clientWidth = e.target.clientWidth,
                    scrollWidth = e.target.scrollWidth,
                    arrList = Array.from(e.target.classList)
                if(scrollWidth > clientWidth){
                    this.isDisabled = false
                    if(!arrList.includes('hover-blue')){
                        e.target.classList.add('hover-blue')
                    }
                } else {
                    this.isDisabled = true
                    e.target.classList.remove('hover-blue')
                }
            },
            linkTo(){
                if(this.isLink){
                    this.$emit("linkTo")
                }
            }
        }
    }
</script>
 
<style lang="less">
    .contentnowrap{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hover-blue:hover{
        color: red;
    }
    .link-text{
        color: red;
        cursor: pointer;
    }
    .el-tooltip__popper{
        font-size: 14px;
        font-family: 'Microsoft YaHei';
    }
</style>
复制代码

使用方式：

注意：show-tooltips组件外层div要给定宽度

    <template>
        ...
        <div>                                                 
            <show-tooltips :txt-info="value"></show-tooltips>  //value为弹框展示的内容
        </div>
        ...
    </template>
    <script>
        import ToolTips from '@/utils/ToolTips'  //引入组件
        export default{
            name: 'component',
            components:{
               'show-tooltips': ToolTips  //注册组件 
            },
            data(){
                return{
                }
            }，
            methods:{}
        }
    </script>
复制代码

上述为单行省略提示，如果是多行省略提示该如何做呢，情况如下：

其实一样

methods:{
    isShowTooltip(e){
        let clientHeight = e.target.clientHeight,
            scrollHeight = e.target.scrollHeight,
            arrList = Array.from(e.target.classList)
        if(scrollHeight > clientHeight){
            this.isDisabled = false
            if(!arrList.includes('hover-blue')){
                e.target.classList.add('hover-blue')
            }
        }else{
            this.isDisabled = true
            e.target.classList.remove('hover-blue')
        }
    },  
}
<style lang="less">
    .wordnowrap{
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;

        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
    }
</style>
复制代码