修改el-popover显示位置

我们在通常情况下使用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
转载请说明出处内容投诉
CSS教程_站长资源网 » 修改el-popover显示位置

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买