vue自定义插件结合iframe封装组件及函数实现弹窗预览文件功能

1、文件预览弹窗组件
<template>
  <!-- 公司组件库的弹窗组件，和element的弹窗组件用法一样 -->
  <sc-tf-dialog-base
    ref="scTfDialog"
    class="prod-dialog"
    :cancelBtnText="'关闭'"
    dialog-name="文件预览"
    :fullscreen="magnify"
    :height="magnify ? '90vh' : '550px'"
    :show-confirm-button="false"
    @beforeClose="closeDialog"
  >
    <template #title>
      <div class="file-title">
        <div>文件预览</div>
        <div>
          <sp-icon
            :type="magnify ? 'restore' : 'magnify'"
            color="#8998AC"
            style="margin-right: 10px"
            @click.native="magnify = !magnify"
            fontSize="25"
          ></sp-icon>
        </div>
      </div>
    </template>
    <!-- iframe嵌入预览文件的网页 -->
    <iframe class="prism-player" :src="origin + url" width="100%" height="100%"></iframe>
  </sc-tf-dialog-base>
</template>
<script>
export default {
  data() {
    return {
      magnify: false
    }
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    // 接收传入的文件地址
    url: {
      type: String,
      default: ''
    },
    // 这里我们项目提供了一个接口传入文件的url后会通过nginx代理到另一个预览的组件中，能提供功能更为全面的预览功能（业务需求，可以忽略，直接将文件url传入iframe也能实现基础的预览功能）
    origin: {
      type: String,
      default:
        process.env.NODE_ENV === 'development'
          ? `${process.env.VUE_APP_PREVIWE_URL}/onlinePreview?url=`
          : `http://${window.location.hostname}:${process.env.VUE_APP_PREVIWE_URLNEW}/onlinePreview?url=`
    },
    // 接收关闭弹窗的方法
    close: {
      type: Function
    }
  },
  components: {},
  created() {
    this.$nextTick(() => {
      console.log(this.url)
      this.$refs['scTfDialog'].showDialog()
    })
  },
  methods: {
    //关闭弹窗
    closeDialog() {
      if (this.close) {
        this.close()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
// 省略样式代码
</style>

2、自定义vue插件挂载调用文件预览功能的方法
// 引入弹窗组件
import filePreviewPopup from './FilePreviewPopup.vue'
import { Base64 } from 'js-base64'
import Vue from 'vue'
// 将组件添加到dom中以实现打开弹窗的效果
const handleVedioBox = (url) => {
  // 注册组件
  const FileViewerConstructor = Vue.extend(filePreviewPopup)
  const instance = new FileViewerConstructor({
    url: url
  })
  // Base64加密传入弹窗组件的url（由于业务需求需要将文件url作为参数传入另一个链接地址中，所以这里需要加密一下）
  instance.url = encodeURIComponent(Base64.encode(url))
  // 将组件添加到dom中--打开弹窗
  document.body.appendChild(instance.$mount().$el)
  // 定义关闭弹窗的方法
  instance.close = () => {
    document.body.removeChild(instance.$mount().$el)
  }
}
// 定义插件的install方法（入口函数），在Vue.use()后会进入该文件自动执行install方法
const install = function (Vue) {
  // 挂载函数
  Vue.prototype.$filePreviewPopup = handleVedioBox
}
export default { install }