1.代码示例
<el-tooltip
v-model="showTool"
:manual="true"
placement="bottom-start"
ref="tool"
>
<div slot="content">
//此处为浮窗内容部分
</div>
<el-button @click="showToolData">点击显示浮窗</el-button>
</el-tooltip>
2.问题描述
上面设置为浮窗在按钮下方显示,当按钮位置位于窗口靠近底部的位置时,浮窗不会自动调整在按钮上方显示,并且content内容为接口动态获取
3.解决办法
在调用接口的方法成功后的位置添加刷新
this.$nextTick(() => {
this.$refs.tool && this.$refs.tool.updatePopper();
})
4.遗留疑问
搜索解决办法过程中,有找到通过配置:popper-option="popperOptions"解决问题的,但是在本次代码中添加之后导致浮窗始终显示在窗口左上角,F12检查发现tooltip的top=0
popperOptions: {
modifiers: [
{
name: 'flip',
enabled: true,
options: {
padding: 10,
fallbackPlacements: ['top','bottom']
}
},
{
name: 'offset',
options: {
offset: [0,10],
}
},
{
name: 'preventOverflow',
enabled: true,
options: {
padding: 10,
boundary: 'viewport',
}
}
]
}

被折叠的 条评论
为什么被折叠?



