<template>
    <div class="text-tooltip">
        <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" :placement="placement">
            <div class="over-flow" @mouseover="onMouseOver(refName)">
                <span :ref="refName">{{ content }}</span>
            </div>
        </el-tooltip>
    </div>
</template>
 
<script>
export default {
    name: 'textTooltip',
    props: {
        // 显示的文字内容
        content: {
            type: String,
            default: () => {
                return ''
            }
        },
        refName: {
            type: String,
            default: () => {
                return ''
            }
        },
        placement: {
            type: String,
            default: 'top'
        }
    },
    data() {
        return {
            isShowTooltip: true
        }
    },
    methods: {
        onMouseOver(str) {
            if (this.$refs[str]) {
                const parentWidth = this.$refs[str].parentNode.offsetWidth;
                const contentWidth = this.$refs[str].offsetWidth;
                // 判断是否开启tooltip功能
                if (contentWidth > parentWidth) {
                    this.isShowTooltip = false;
                } else {
                    this.isShowTooltip = true;
                }
            }
        }
    }
}
</script>
 
<style scoped>
.over-flow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>