element Popover 隐藏不销毁问题

element Popover 隐藏不销毁问题

前言

问题:循环渲染时使用Popover组件,当鼠标移入组件内显示popover后,移出隐藏,但是popover并不会销毁,这样导致dom内的popover越来越多,最后出现跳转路由出现下面的BUG

 <div v-for="item in list" :key="item.id">
              <el-popover
                placement="bottom"
                width="280"
                trigger="hover"
                :open-delay="200"
                @after-enter="onPopoverShow"
                @hide="onPopoverHide"
              >
                <div class="popover-tips">
                  <ul>
                    <li>{{ $t("phoneView.phoneNumber")}}{{ item.phoneNumber }}</li>
                    <li>{{ $t("phoneView.paleNumber")}}{{ item.paleNumber }}</li>
                  </ul>
                </div>
                <!--图标 BEGIN-->
                <div
                  v-show="!item.isMasterPhone || showMasterPhone"
                  :id="item.uniqueId"
                  slot="reference"
                  class="with-node-menu icon"
                  @mouseenter="doPhoneItemClick(item)"
                >
                  <div>
                    <svg-icon :name="item.phoneIcon" class="icon-master" />
                </div>
                <!--图标 END-->
              </el-popover>
            </div>

`在这里插入图片描述

在这里插入图片描述

解决步骤

一、给组件添加calssName

使用element提供的参数为popover组件添加calssName
在这里插入图片描述

 <el-popover popper-class="remove-popover" > </el-popover >

二、给组件添加事件,我这边是在隐藏时销毁

 <el-popover popper-class="remove-popover" @hide="onPopoverHide"> </el-popover >

在这里插入图片描述

  //  el-popover在隐藏时触发
  private onPopoverHide() {
    $('.remove-popover').remove(); //隐藏时删除
  }

我这边目前用的时Jquery的方法,目前还未找到其他更好的方法,有更好的方法可以留言哦

  • 0
    点赞
  • 3
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值