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

记得要销毁监听事件

 

你可能感兴趣的:(vue)