Vue——弹窗点击弹窗外面关闭弹窗(无掩膜层)
需求:在某些时候弹出弹窗,但是不能又淹没层,点击弹窗外面之后能关闭弹窗。
·
需求:在某些时候弹出弹窗,但是不能又淹没层,点击弹窗外面之后能关闭弹窗。
思路:用document 的 addEventListener来监听点击关闭事件。
效果:
代码:
funcProjectFile(event) {
//阻止冒泡
event || (event = window.event);
event.stopPropagation ? event.stopPropagation(): (event.cancelBubble = true);
this.funcInitProjectPage();
this.showPdfBox = true;// 显示pdf的弹窗
PDFObject.embed("https://pdfobject.com/pdf/sample-3pp.pdf", "#pdfBox");
document.addEventListener("click", this.hideFilePanel, false);// 监听关闭事件
},
hideFilePanel(e) {
console.log("销毁关闭pdf的监听事件。");
document.removeEventListener("click", this.hideFilePanel, false);
this.showPdfBox = false;// 隐藏pdf的弹窗
},
【我这是vue写的】
简单说就是用document.addEventListener("click", this.hideFilePanel, false);// 监听关闭事件hideFilePanel
记得要销毁监听事件
更多推荐
已为社区贡献7条内容
所有评论(0)