使用vue-pdf插件展示pdf文档

<template>
  <div class="citicBankDoc">
     <el-dialog
     :show-confirm-button="false" 
      :visible.sync="showCiticDialog"
      :show-close="false"
     > 
     <div class="iframe_con">
      <div class='mask'>
        <pdf  v-for="i in totalPage" :key="i"  :src="loadingTask" :page="i"></pdf>     
        <div class="btns" v-if='showDialogButton'>
        <el-button type="primary" @click="handleCiticBankDialog" size="small">确认</el-button>
      </div>
      </div>
    </div>
   </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf';
export default {
  name: 'citicBankDocPage',
  props: ['showCiticDialog'], 
  data () {
    return {
      showDialogButton: false,
      totalPage: null,
      loadingTask: ''
    };
  },
  mounted () {
    var loadingTask = pdf.createLoadingTask(window.common.$store.getters.getCiticPolicyUrl);
    console.log(loadingTask, 'l');
    loadingTask.promise.then(pdf => {
      this.loadingTask = loadingTask;
      this.totalPage = pdf.numPages;
    }).catch((err) => {
      console.log(err, '加载失败');
    });
    this.handleSureButton();
  },
  components: {
    pdf
  },
  watch: {
  },
  compuetd: {
  },
  beforeDestory () {

  },
  methods: {
    //  处理中信银行弹窗按钮先显示
    handleSureButton () {
      var that = this;
      window.setTimeout(()=>{
        that.showDialogButton = true;
      }, 2000);
    },
    // 控制中信银行的弹窗,关闭操作在父页面
    handleCiticBankDialog () {
      this.$emit('handleCiticDialogClose');
    }
  }
};
</script>

<style lang="less"  scoped>
.citicBankDoc{
   ::v-deep.el-dialog{
     margin-top:3vh!important;
    height: 90%;
    width:70%;
    overflow-y: auto;
     .btns{
      text-align:center!important;
      button{
       margin-right: 15px;
       margin-bottom:15px;
      }
    }

  }
    ::v-deep.el-dialog__body{
    position:relative!important;
    height: 90%!important;
  }
    .pdf-iframe{
    width: 100%;
    height: 100%;
    overflow-y:auto
}
}
</style>