在表格中，移动到上面时，悬浮显示说明，首次移入时加载，想要效果如下图：
image.png
发现首次移入时，位置偏移了，这就挺闹心的
image.png
网上的解决方案是固定大小，但是对应动态内容是不适合的，自己使用定时器解决，代码如下：
<template>
<a-popover placement="top"
overlayClassName="tagPopover"
:visible="popoverVisible"
@visibleChange="(visible) =>init(visible)"
:get-popup-container="getPopupContainer"
>
<template slot="content">
<template v-for="(item, index) in reason">
<div style="font-size: 12px;">{{ item.name }}({{ item.value }})</div>
</template>
</template>
<span>{{ text ? text : '-' }}</span>
</a-popover>
</template>
<script>
export default {
name: 'AdjustmentTag',
data() {
return {
popoverVisible: false
}
},
props: {
text: {
type: Number,
required: false
},
reason: {
type: Array,
required: false
}
},
methods: {
getPopupContainer(trigger) {
return trigger.parentElement;
},
init(visible) {
if(visible){
const _this = this
if (!this.reason) {
visible = false
setTimeout(function() {
_this.popoverVisible = true
}, 50)
this.$emit('initData')
}else {
this.popoverVisible = true
}
} else {
this.popoverVisible = false
}
}
},
mounted() {}
}
</script>
<style scoped>
</style>
