cz-hjjc-oa/src/components/OnlineFile/index.vue

<template>
  <div>
    <vxe-modal
      :width="defaultModalSize.width"
      :height="defaultModalSize.height"
      show-zoom
      resize
      transfer
      esc-closable
      :fullscreen="$store.getters.device === 'mobile'"
      :z-index="zIndex"
      v-model="showModal"
      :footer-hide="true"
      title="预览"
      :padding="false"
    >
      <template>
        <iframe
          style="display: block;width: 100%;height: 100%;border: 0;"
          :src="codeUri"
          frameborder="0"
        ></iframe>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { PopupManager } from "element-ui/lib/utils/popup";
import {defaultModalSize} from "@/settings";

export default {
  data() {
    return {
      defaultModalSize,
      zIndex: PopupManager.nextZIndex(),
      showModal:false,
      codeUri: "",
    }
  },
  methods: {
    open(url) {
      this.codeUri = `${window.location.origin}/admin/#/preview?url=${url}`;
      this.showModal = true;
    }
  },
  computed: {},
  watch: {
    showModal(newVal) {
      if (!newVal) {
        this.codeUri = ''
      } else {
        this.zIndex = PopupManager.nextZIndex()
      }
    }
  },
  created() {
    this.$bus.$on('online-file',(url) => this.open(url))
  },
  beforeDestroy() {
    this.$bus.$off('online-file')
  }
}
</script>

<style scoped lang="scss">
</style>