我们在通常情况下使用el-popover
组件,都是让组件自动计算气泡显示位置。不过我之前遇到过这样一个需求:当触发气泡显示的元素宽度太大,气泡显示位置可能会离鼠标位置较远,用户反映移动鼠标到气泡上的距离太长了,希望能让气泡在鼠标进入触发元素的位置显示。
方法一:通过修改组件 offset 属性,修改气泡显示位置
首先,我想到看组件的文档,看组件是否有提供这样的需求支持。然后我找到一个属性offset: 出现位置的偏移量
,这样我只需把鼠标的位置设置进去不就可以了吗?
修改完后发现实际效果和预想的有些出入
仔细查看后发现,offset
这个偏移量是在组件计算出的left
距离的基础上再进行偏移,那么想要显示位置等于偏移量,需要限制组件计算的left=0
,我想这点通过设置placement
属性也可以实现。
实现代码
<template>
<el-popover
ref="popover"
title="标题"
width="200"
content="这是嵌套操作的内容"
:offset="popoverOffset"
placement="bottom-start"
trigger="hover"
>
<div
slot="reference"
style="
width: 100%;
height: 100px;
background: aquamarine;
overflow-x: scroll;
"
@mouseenter="handlerMouseenter"
>
<div style="width: 3000px">通过修改offset属性,改变气泡出现的位置</div>
</div>
</el-popover>
</template>
<script>
module.exports = {
data() {
return {
popoverOffset: 0, // 出现位置的偏移量
};
},
methods: {
handlerMouseenter(event) {
const { clientX } = event;
this.popoverOffset = clientX;
console.log("鼠标clientX", clientX);
let timer = setTimeout(() => {
console.log(this.$refs.popover.popperElm);
}, 5);
},
},
};
</script>
效果
看起来还不错,正当我以为可以交差的时候,又发现了一个问题!!!
我设置了placement="bottom-start"
,但是当元素下方空间不够,气泡转移到上方显示的时候,offset
属性不生效了。
不过到这我就没有再继续研究下去了,因为我发现我能拿到气泡元素,那我可以直接修改left
属性。
方法二:通过直接修改气泡元素 left 属性,修改气泡显示位置
<template>
<el-popover
ref="popover"
title="标题"
width="200"
trigger="hover"
content="这是嵌套操作的内容"
>
<div
slot="reference"
style="width: 100%; height: 100px; background: pink; overflow-x: scroll"
@mouseenter="handlerMouseenter"
>
<div style="width: 3000px">
通过直接修改气泡left属性,改变气泡出现位置
</div>
</div>
</el-popover>
</template>
<script>
module.exports = {
methods: {
handlerMouseenter(event) {
// 鼠标进入触发元素
const popover = this.$refs.popover;
let timer = setTimeout(() => {
const { clientX } = event;
const bodyWidth = document.body.clientWidth;
// 找到气泡元素
const { popperElm } = popover;
/**
* 鼠标位置+气泡弹框宽度是否小于body的宽度
* 1. 是,设置鼠标位置为气泡弹框横向位移
* 2. 否,设置body宽度-气泡弹框宽度为气泡弹框横向位移
*/
let disX =
clientX + popperElm.offsetWidth < bodyWidth
? clientX
: bodyWidth - popperElm.offsetWidth;
popover.popperElm.style.left = disX + "px";
clearTimeout(timer);
}, 5);
},
},
};
</script>
以上基本算是完美符合需求了,但是需要注意2点,
popperElm
的值需要等组件创建/更新气泡元素后才能拿到,所以需要延迟一点时间执行修改left
逻辑这里会出现2个问题(我尝试后使用延迟5ms没有出现问题):
1.1 如果不延迟或延迟时间稍短会出现,没拿到当前气泡元素,修改不生效
1.2 如果延迟时间稍长会出现,气泡先显示在原来的位置,再显示到修改后的位置,有一个闪现的效果- 需要判断左右的空间是否能足够显示气泡,如不能需要进行处理(我的示例中页面结构简单只需要处理靠右时的气泡显示)
总结
如果触发元素上下空间足够,使用方法一更简单,否则使用方法二效果更好