Popover弹框中再弹框时，操作再弹框后Popover消失问题解决

在使用Popover弹框时，部分业务会出现再弹框确认时，操作在弹框后Popover消失；这样不仅form表单内容传不到父组件中，在二次确认时，Popover消失也会影响用户体验；

一.组件介绍

Popover这个组件还是很好用的。一般这个里面是用来做数据展示的，很少有人把操作放在里面，即使放在里面也很少会弹框。可是我就遇到了，当操作另一个弹框时，Popover就会消失。这是因为Popover会监控body上的click事件，用来消失Popover(showPopper= false)。

二.改造原理

查看文档之后发现Popover接收v-model，我就在想，我控制v-model的值，只有在我想让它消失时才把值置为false。经过尝试发现并不能达到我想要的效果。这是因为Popover内部有一个showPopper变量，在监听到body上的click时，它会执行this.showPopper= false，那时pop框已经销毁了，然后再$emit(‘input’, value)时值传不到父组件中；

那只能换一个思路了，在body的click处理函数中我来控制是否需要消失。我会拦截Popover的handleDocumentClick函数。在其中判断是否已经锁定(locked)了，如果locked了就不执行任何操作。所以最终我要做的是从现有的Popover中创建一个新的Popover组件，它混合了Popover，然后添加了一些新的内容，代码如下可复制（下图中完整代码）：

<script>

import { Popover } from 'hui';

export default {

  name: 'ElPopoverFix',

  extends: Popover,

  props: {

    // 处于body下的弹窗点击事件不触发关闭下拉菜单，默认支持 msgbox, select内嵌的select, 全屏loading

    preventBodyPopEvent: {

      type: Boolean,

      default: false

    },

    preventBodyPopCssClass: {

      type: Array,

      default: () => [

        'el-message-box__wrapper',

        'el-select-dropdown',

        'el-loading-mask'

      ]

    }

  },

  methods: {

    handleDocumentClick(e) {

      if (this.preventBodyPopEvent && this.preventBodyPopCssClass?.length) {

        const _findPopWrapperEl = el => {

          if (el === document.body || !el.parentElement) {

            return null;

          }

          if (

            this.preventBodyPopCssClass.some(cssClass =>

              el.classList?.contains(cssClass)

            )

            && el.parentElement === document.body

          ) {

            return el;

          }

          return _findPopWrapperEl(el.parentElement);

        };

        const popWrapperEl = _findPopWrapperEl(e.target);

        if (popWrapperEl) {

          // 阻止点击事件

          return;

        }

      }

      return Popover.methods.handleDocumentClick.call(this, e);

    }

  }

};

</script>

三.引用方法 

使用的地方直接引用，设置参数:prevent-body-pop-event = “true”：即可；

<el-popover-fix

:prevent-body-pop-event = “true”

> 

<el=popover-fix>