agriculture-one-map/src/components/PdfDialog.vue

<template>
  <el-dialog
      class="my-dialog yse-events"
      :align-center="true"
      with-header="false"
      destroy-on-close
      :model-value="showDialog"
      @close="closeDialog()"
      :modal="true"
  >
    <div class="dialog-box">
      <div class="title">
        <div class="myclose cursor-pointer" @click="closeDialog"></div>
      </div>
       <iframe class="my-body" :src="src" id="my-pdf"></iframe>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, toRefs, ref,watch} from "vue";
import {base_img_url2} from "../api/config"
import eventBus from "@/api/eventBus";

const title = ref(null)
const src=ref()
const showDialog=ref(false);


onMounted(async () => {
})

function closeDialog(){
  showDialog.value = false;
}
function gybgListener(e){
  showDialog.value = true;
  src.value = e.filename;
  title.value = e.title;
}
eventBus.off("homePage:gybg",gybgListener)
eventBus.on("homePage:gybg",gybgListener)

</script>

<style lang="scss" scoped>
$title-height:44px;
$body-height:calc(100% - $title-height);

.dialog-box{
  font-family: PingFangSC-Regular, PingFang SC;
  position: fixed;
  left: calc(50% - 700px);
  top:0px;
  width: 80%;
  height: calc(100% - 100px);
  background: rgba(1,17,22,0.8);
  box-shadow: 0px 0px 20px 0px #232323;
  border-radius: 4px;
  border: 2px solid #232323;
  z-index: 99999;

  .title{
    position: relative;
    width: 100%;
    height: $title-height;
    box-sizing: border-box;
    background: #232323;
    border-radius: 4px 4px 0px 0px;
    border-bottom: 2px solid #232323;
    .myclose{
      position: absolute;
      right: 0px;
      top: calc($title-height / 2 - 8px);
      margin-right: 20px;
      width: 16px;
      height: 16px;
      background-image: url("@/assets/img/close.png");
      background-size: 100% 100%;
    }
  }
  .my-body{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

}

</style>