博客

描述：我的需求图下：点击按你牛后显示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组件。我的取消监听事件放在了显示弹窗里面，这样能保证显示弹窗后点击监听才开始，关闭弹窗后改点击事件也移除了。