网站优化标题,建设库官网查询系统,wordpress页面点赞,2010年最具人气的平面设计师必备网站场景#xff1a; 当popover框弹出的时候#xff0c;又有MessageBox 提示#xff0c;此时关闭MessageBox 提示#xff0c;popover就关闭了。将popover改为手动激活#xff0c;可以解决这个问题#xff0c;但是会引起另外一个问题#xff0c;之前#xff08;click触发的时… 场景 当popover框弹出的时候又有MessageBox 提示此时关闭MessageBox 提示popover就关闭了。将popover改为手动激活可以解决这个问题但是会引起另外一个问题之前click触发的时候点击空白位置可以关闭掉popover但是现在却不可以了
解决
el-popoverplacementbottomtitle标题width200triggermanualcontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。v-modelvisibleel-button slotreference clickvisible !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;});}}}
