el-popover解决全屏内容区弹窗不展示问题

文艺理科生Owen
1,648 阅读2分钟

最近遇到一个棘手的问题，全屏后hover提示的弹窗不展示了，由于项目是可视化大屏，所以全屏并非是浏览器F11的那种，而是只放大main区域。

举个例子，为了快速复现效果，采用若依框架项目演示（若依官网：doc.ruoyi.vip/），

表格组件采用elementUI中的table组件，通过在column上配置:show-overflow-tooltip=true, 可以快速实现超出单元格以省略号展示，鼠标悬浮显示弹窗，展示所有内容。

这种是浏览器F11全屏的效果，弹窗能够正常显示：

image.png

此时改变放大区域，将app-main的dom元素传入screenfull中

// 点击全屏按钮事件
click() {
  ...
  let appMain = document.querySelector('.app-main')
  screenfull.toggle(appMain)
}

这种是全屏只放大main区域的效果，弹窗消失了：

image.png

到底发生什么了呢？经过两天的研究和尝试，有一个相对简单的解决方案（先说结论再解释）。首先放弃使用show-overflow-tooltip，然后手动完成这个属性的功能。

（1）通过scss样式手动实现超出单元格宽度省略号效果

.app-container {
  .el-table {
    ::v-deep .el-table__body-wrapper {
      td:nth-child(2) .cell {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

（2）在表格列插槽中，选用el-popover组件，实现弹窗效果

<el-table-column label="会话编号" align="center" prop="tokenId">
  <template slot-scope="scope">
    <el-popover
      :append-to-body="false"
      placement="bottom-start"
      width="200"
      trigger="hover"
      :content="scope.row.tokenId">
      <span slot="reference">{{ scope.row.tokenId }}</span>
    </el-popover>
  </template>
</el-table-column>

(3)调整样式，使弹窗内的内容实现高度自适应（内容过多增加滚动条）

::v-deep .el-popover {
  width: 100px;
  max-height: 70px;
  white-space: pre-wrap;
  overflow-y: auto;
}

目前两种模式下可以通过鼠标悬浮展示弹窗了

image.png

image.png

 

仔细检查下，还有点小瑕疵，当非全屏模式下，倒数两行的弹窗会被遮挡

image.png

image.png

但全屏模式下却都正常，对比两种模式下弹窗的定位属性可以容易看出： 非全屏模式下，弹窗基于所在单元格绝对定位； 全屏模式下，弹窗基于所在单元格固定定位。

相对坐标由el-popover自动计算得出。由于el-popover标签设置了:append-to-body="false"，所以弹窗dom只会插入到对应单元格中，计算出的相对坐标需要微调。

目前的场景，只需要调整倒数两行的弹窗相对坐标就可以了。

提一个小建议：如果弹窗内容比较多，用户需要频繁查看和复制弹窗内容，建议弹窗的触发行为设置成点击，这样体验会更好一些（已经成功的说服了产品，哈哈哈）

avatar
文章
阅读
粉丝