内容过长时自动出现tooltip_css超出范围后出现tooltip

需求

1、内容完整展示时，不需要出现 tooltip

2、内容过长时，出现省略号，鼠标 hover 并 tooltip 展示完整内容

思路

1、css 控制省略号的展示

2、自定义 Vue 指令，动态控制 Tooltip 是否展示

方案

1、自定义 Vue 指令：src/core/plugins/tooltipOverflowAutoShow.js

tooltipOverflowAutoShow.js

import Vue from 'vue';

import { getStyle } from 'element-ui/src/utils/dom';

export default {

    inserted: function(el, binding, vnode) {

               // 获取 padding 大小

        const getSP = (el, type) => {

            return parseInt(getStyle(el, type), 10) || 0

        };

               // 监听鼠标行为

        el.addEventListener('mouseenter', function() {

            // 需要先关闭 Vue 全局警告消息，否则下面的操作会触发 Vue Console Warning

                       let defaultSilent = !!Vue.config.silent;

            Vue.config.silent = true;

                       // 默认禁止 tooltip 

            vnode.componentInstance.disabled = true;

            const range = document.createRange();

            range.setStart(el, 0);

            range.setEnd(el, el.childNodes.length);

            const rangeWidth = Math.round(range.getBoundingClientRect().width);

            const padding = getSP(el, 'paddingLeft') + getSP(el, 'paddingRight');

                       // 如果当前元素内容宽度超过容器宽度，则显示 tooltip

            if (rangeWidth + padding > el.offsetWidth) {

                vnode.componentInstance.disabled = false;

            }

                       // 还原 Vue 全局配置

            Vue.config.silent = defaultSilent;

        });

    }

};

2、main.js 注入指令

main.js

import tooltipOverflowAutoShow from './core/plugins/tooltipOverflowAutoShow.js'

Vue.directive('overflowAutoShow', tooltipOverflowAutoShow); 

3、使用 tooltip 组件并增加指令 v-overflow-auto-show

<div class="cluster-card">

    <el-tooltip :content="list.clusterName" v-overflow-auto-show>

        <h4>{{list.clusterName}}</h4>

    </el-tooltip>

    <el-tooltip :content="list.description" v-overflow-auto-show>

        <div class="cluster-desc">

            {{list.description || list.clusterName}}

        </div>

    </el-tooltip>

</div>

4、css 内容溢出省略号展示

.ellipsis {

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

}

不足

本插件 不适合 多行文本省略号的情况，如：

.ellipsis-multi-line { 

        text-overflow: ellipsis;

    overflow: hidden;

    display: -webkit-box;

        <!-- 内容超过2行时换行 -->

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}