Optimize Table's Tooltip mouse effect

This commit is contained in:
梁灏 2019-10-21 11:30:21 +08:00
parent cd16f8a5a1
commit 3e3afb1deb

View file

@ -7,7 +7,7 @@
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template> <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'normal'"> <template v-if="renderType === 'normal'">
<template v-if="column.tooltip"> <template v-if="column.tooltip">
<Tooltip transfer :content="row[column.key]" :theme="tableRoot.tooltipTheme" :disabled="!showTooltip" :max-width="300" class="ivu-table-cell-tooltip"> <Tooltip transfer :content="row[column.key]" :theme="tableRoot.tooltipTheme" :disabled="!showTooltip && !tooltipShow" :max-width="300" class="ivu-table-cell-tooltip" @on-popper-show="handleTooltipShow" @on-popper-hide="handleTooltipHide">
<span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span> <span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
</Tooltip> </Tooltip>
</template> </template>
@ -62,6 +62,7 @@
uid: -1, uid: -1,
context: this.$parent.$parent.$parent.currentContext, context: this.$parent.$parent.$parent.currentContext,
showTooltip: false, // overflow showTooltip: false, // overflow
tooltipShow: false
}; };
}, },
computed: { computed: {
@ -101,6 +102,12 @@
}, },
handleTooltipOut () { handleTooltipOut () {
this.showTooltip = false; this.showTooltip = false;
},
handleTooltipShow () {
this.tooltipShow = true;
},
handleTooltipHide () {
this.tooltipShow = false;
} }
}, },
created () { created () {