element-ui在页面中，多个触发点共用一个el-popover提示组件

大部分情况下，我们是可以在每个需要使用el-popover的触发点上各自使用该组件的，也是官方提供的使用方式，但是有一些特殊情况，例如：大数据的表格、tree树形节点等，如果是数据比较多，每一个节点都使用各自的el-popover，往往可能会导致页面卡顿，所以这时候就需要把提示组件摘出来，放到某个地方，所有的触发点都使用这个共同的组件，从而提升页面性能。

以下是一个如何共用el-popover组件的简单例子：

完整代码如下：

<template>
  <div>
    <div class="page-wrapper">
      <div
        class="btn"
        @mouseover="event => handleMouseover(event, btn)"
        @mouseout="event => handleMouseout(event, btn)"
        type="primary"
        :key="`btn-${idx}`"
        v-for="(btn, idx) in 10"
      >
        按钮 - {{ idx + 1 }}
      </div>

      <!-- 稍微复杂的布局 -->
      <div
        class="btn"
        style="width: 600px;"
        @mouseover="event => handleMouseover(event, btn)"
        @mouseout="event => handleMouseout(event, btn)"
      >
        <span>复杂的布局,如：div嵌套了span，鼠标在上面移动看看效果，popover 会移动</span>
      </div>
    </div>
    <el-popover ref="myPopover" placement="bottom-start" trigger="hover" :open-delay="300">
      <div>
        提示框详情内容，提示框详情内容，提示框详情内容，提示框详情内容。
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleMouseover(e, btn) {
      this.$nextTick(() => {
        const reference = e.target;
        const popper = this.$refs.myPopover;

        popper.referenceElm = reference;
        popper.popperJS && (popper.popperJS._reference = reference);
        popper.updatePopper();
        popper.handleMouseEnter();
      });
    },
    handleMouseout(e, btn) {
      this.$nextTick(() => {
        const reference = e.target;
        const popper = this.$refs.myPopover;
        popper.referenceElm = reference;
        popper.popperJS && (popper.popperJS._reference = reference);
        popper.handleMouseLeave();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  background: #fff;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  .btn {
    text-align: center;
    border: 1px solid blue;
    width: 120px;
    height: 40px;
    line-height: 40px;
    margin: 40px;
  }
}
</style>

效果图如下：

你可能会遇到的问题：
1、由于el-popover是共用一个，并且设置了延迟300毫秒，所以当第一次显示后，立马移动到其他触发点上，提示组件会里面显示（只是改变了位置）————暂未处理；
2、上面例子中最后一个按钮，鼠标在上面到处移动，会发现el-popover会多次改变位置，暂时处理办法是，尽量让触发点干净，里面上面大部分按钮是div里面直接嵌套文字。如果你遇到特殊情况，例如：按钮文字长度不固定，对多显示两行，水平、垂直居中，要满足这些条件，一般需要用到标签嵌套的方式，但是又会有最后一个按钮描述的情况一样，你可以参考如下实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 300px;
      height: 500px;
      overflow: hidden;
      border: 1px solid black;
    }

    .div::before {
      content: attr(customText);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
<div class="div" customText="肯定撒开了房间啦睡觉咯开发九里峰景啦上飞机了卡是否健康啦睡觉房间啊算了解放路卡视角按时计费拉屎"></div>
</body>
</html>

element-ui在页面中，多个触发点共用一个el-popover提示组件

qngyun1029

引用和评论

div标签直接嵌套文本内容，文本垂直居中

el-select：value.push is not a function

关于Elementui中el-select自动展开

el-table多列应用及排序优化