最近有一个需求,就是在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 不支持这些方法。

Logo

前往低代码交流专区

更多推荐