当前位置：首页 > news >正文

由popover框一起的操作demo问题

news 2025/7/4 1:05:23

在这里插入图片描述
场景： 当popover框弹出的时候，又有MessageBox 提示，此时关闭MessageBox 提示，popover就关闭了。将popover改为手动激活，可以解决这个问题，但是会引起另外一个问题，之前（click触发的时候），点击空白位置，可以关闭掉popover，但是现在却不可以了

解决

<el-popoverplacement="bottom"title="标题"width="200"trigger="manual"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"v-model="visible"><el-button slot="reference" @click="visible = !visible">手动激活</el-button></el-popover>

可以看到手动激活的时候，是通过visible来决定其显示或者隐藏，那是不是可以监听全局的点击事件来做处理：当MessageBox 隐藏的时候，且popover显示的时候，不点击（除了触发元素之外）的时候，做关闭处理

关键点在于如何知道点击的是哪个元素？
*点击A的时候不管，出了A之外要做处理，很明显这是个包含的关系 *
了解一下contains：探究元素之间是不是包含的关系
在这里插入图片描述

  mounted() {document.addEventListener('click', this.handlePopoverShow);},beforeDestroy() {document.removeEventListener('click', this.handlePopoverShow);},handlePopoverShow(event) {const elements = $('.el-message-box__wrapper');const specificElement = $('.add-btn');const specificElementEdit = $('.edit-btn');console.log('specificElementEdit', specificElementEdit);let isShow = this.tableData.some((item) => item?._popoverVisible);if ((this.formPopoverVisible || isShow) &&elements.length &&elements[0].style.display === 'none') {if (!specificElement[0].contains(event.target)) {this.formPopoverVisible && (this.formPopoverVisible = false);}if (!specificElementEdit[this.indexEdit].contains(event.target) &&isShow) {this.tableData.forEach((item) => {item._popoverVisible = false;});}}}