使用方法
<TextTooltip :content="contentValue"></TextTooltip>给Tooltip再包装一下
<template><Tooltip transfer :content="content" :theme="theme" :disabled="!showTooltip" :max-width="300" :placement="placement"class="cell-tooltip"><span ref="content" :class="[className]" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"class="cell-tooltip-content">{{ content }}</span></Tooltip>
</template>
<script>
export default {name: 'TextTooltip',props: {content: String,className: String,theme: {type: String,default: () => {return 'dark';}},placement: {type: String,default: () => {return 'bottom';}},},data() {return {showTooltip: false // 是否需要禁止提示};},methods: {handleTooltipIn() {const $content = this.$refs.content;this.showTooltip = $content.scrollWidth > $content.offsetWidth;},handleTooltipOut() {this.showTooltip = false;}}
};
</script>
<style lang="less" scoped>
.cell-tooltip {width: 100%;display: flex;align-items: center;.cell-tooltip-content {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}
</style>
)
