描述：我的需求图下：点击按你牛后显示pdf弹窗，点击弹窗外围影藏弹窗。分两个点：
1：pdf弹窗的创建。
2：显示pdf弹窗，创建监听事件（监听页面点击，执行后隐藏弹窗同时
取消监听事件
）
。
安装pdfObject：过程简单直接：
npm i pdfobject –save
创建pdf弹窗代码如下：
<div ref='pdfDiv' id='pdfBox' class="pdf-box" v-show="showPdfBox"></div>样式：
.pdf-box{
background-color: #003366;
position: fixed;
top: 0;
left: 0;
transform: translate(50%, 50%);
z-index: 2;
width: 54.8vw;
height: 52vh;
}事件：
// 显示弹窗并加载文档
funcProjectFile(event){
//阻止冒泡
event || (event = window.event);
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
this.funcInitProjectPage();
this.butIndex = 1;
this.childButIndex = 12;
this.showPdfBox = true;
// 加载pdf文档 #pdfBox对应上面
PDFObject.embed("https://pdfobject.com/pdf/sample-3pp.pdf", "#pdfBox");
document.addEventListener('click', this.hidePanel, false);
},
// 关闭弹窗点击监听
hidePanel(e) {
console.log("销毁关闭pdf的监听事件。")
document.removeEventListener("click", this.hidePanel, false);
this.showPdfBox = false;
},说明：我是用if-show创建的整个vue组件。我的取消监听事件放在了显示弹窗里面，这样能保证显示弹窗后点击监听才开始，关闭弹窗后改点击事件也移除了。