文字超长展示...并tooltip展示全部内容

文字超长展示…并tooltip展示全部内容

实现功能备忘

vue2中使用iView写组件实现文字超出固定长度展示省略号，鼠标hover上去提示框展示全部内容：

组件

<template>
    <div class="textToolTip" :style="{maxWidth:maxWidth+'px'}">
        <Tooltip transfer :content="content" :theme="theme" :disabled="!showTooltip" :max-width="maxWidth"
            :placement="placement" class="cell-tooltip"  @mouseleave="handleTooltipOut">
            <span ref="content" :class="[className, row > 1 ? 'ellipsis-two-lines' : 'cell-tooltip-content']"
                @mouseenter="handleTooltipIn" :style="{ '-webkit-line-clamp': row }" @click="_onClick">{{
                    content
                }}</span>
        </Tooltip>
    </div>
</template>

<script>
export default {
    name: 'TextTooltip',
    props: {
        content: {
            type:[String, Number],
            default:''
        },
        className: String,
        theme: {
            type: String,
            default: () => {
                return 'dark';
            }
        },
        placement: {
            type: String,
            default: () => {
                return 'bottom';
            }
        },
        maxWidth: {
            type: [String, Number],
            default: () => {
                return 300;
            }
        },
        row: {
            type: [String, Number],
            default: () => {
                return 1;
            }
        }
    },
    data() {
        return {
            showTooltip: false // 是否需要禁止提示
        };
    },
    methods: {
        handleTooltipIn() {
            const $content = this.$refs.content;
            if (this.row > 1) {
                this.showTooltip = $content.scrollHeight > $content.clientHeight || $content.scrollWidth > $content.clientWidth;
            } else {
                this.showTooltip = $content.scrollWidth > $content.offsetWidth;
            }
        },
        handleTooltipOut() {
            this.showTooltip = false;
        },
        _onClick() {
            this.$emit('textClick')
        }
    }
};
</script>
<style lang="less" scoped>
.cell-tooltip {
    width: 100%;
    display: flex;
    align-items: center;
    word-break: normal;
    white-space: normal;

    .cell-tooltip-content {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ellipsis-two-lines {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>

组件使用

<TextToolTip :content="item.dataAstCnName" :placement="'top'" :maxWidth="350" @textClick="goDetail(item)"></TextToolTip>