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

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

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

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

import { Popover } from 'element-ui';
const handleDocumentClick = ElPopover.methods.handleDocumentClick;
const SubPopover = {
    name: 'SubPopover',
    mixins: [Popover],
	props: {
		locked: {
			type: Boolean,
			false: false
		}
	},
	
	methods: {
		handleDocumentClick(e) {
			if (!this.locked) {
				handleDocumentClick.call(this, e);
			}
		}
	}
};

使用的地方

...
<sub-popover :locked="locked"></sub-popover>

...

这里是demo，需要的小伙伴可以参考https://download.csdn.net/download/Chinese521/13113447 如果404说明还在审核中，请耐心等待:)。
如果对你有帮助，请点赞哦:)