最近有一个需求，就是在hover组织树的时候，需要弹出一个popover弹框，来进行对应的效果。且popover中的操作列表需要根据栏目权限来展示。效果如下图：

 原本想着自己封装一个组件来完事，但是想到element-plus中的el-popover有类似的效果，想着多一事不如少一事（主要还是因为懒）。就想着直接用这个组件算了，但是看了官网的例子，发现一个popopver只能跟一个手柄绑定，这样子一来组织树下的栏目越多，渲染的popover弹框也越多，显得不够优雅。于是想着用多个手柄来控制一个popover弹框。

主要代码实现如下：

手柄的代码，就是上面示意图中的三个小点

<i
   :ref="el => myRefs[node.data.channelId]=el"
   class="iconfont tm-icon-moreandroid"
   @click.stop="handleShowPopover(data)"
></i>

popover代码

<el-popover
      v-if="temp.channelId"
      :visible="showPopover"
      ref="popoverRef"
      trigger="click"
      title=""
      virtual-triggering
      persistent
      placement="right"
      popper-class="sitebar-popover-wrap"
      :virtual-ref="myRefs[temp.channelId]"
      transition=""
    >
      <span
        class="popover-item"
        @click="operaiton('fragment')"
      >
        碎片新闻
      </span>
      <span
        class="popover-item"
        @click="operaiton('preview')"
      >
        预览页面
      </span>
    </el-popover>

手柄事件(state.showPopover显示隐藏控制，是为了保证再一次点开popover，能保证popover结束上一次的关闭事件，触发本次的打开事件)：

const handleShowPopover =(data)=> {
      state.temp.channelId = data.channelId;
       
      state.showPopover = false;
      setTimeout(() => {
        state.showPopover = true;
      }, 400);
    }

其实element-plus 中的popover 是依赖popperjs实现的，我原本想直接用popperjs来实现的，但是也要同时来控制popper 列表的显示隐藏和手柄更换，不是很简洁，故不采用。

vue 2.0 中的element ui 的el-popover貌似提供了实例的show()和hide() 方法 可以另外处理之。element plus 不支持这些方法。