vue中使用jsx封装一个文件预览的组件，可实现全屏，退出全屏，关闭预览等效果

1、创建一个组件（其中包含全屏，退出全屏，关闭预览等功能，加载中的组件使用了antd的组件库，使用jsx渲染页面，可改成template）

目录：

Component.vue内容：

<script>
export default {
  name: 'FilePreview',
  props: {

  },
  data() {
    return {
      // 是否显示整个预览组件（默认不显示，点击预览按钮触发show事件
      isShow: false,
      // 默认iframe的地址
      iframeSrc: 'https://www.baidu.com',
      // 是否spin加载
      isSpin: true,
      // 是否全屏（默认不全屏，window不支持默认全屏）
      isFullScreen: false,
    };
  },
  mounted() {
    /**
     * 监听是否全屏，控制isFullScreen方法
     */
    document.addEventListener('fullscreenchange', () => {
      this.isFullScreen = !this.isFullScreen;
    });
  },
  methods: {
    /**
      * 是否显示预览组件
      */
    show(iframeSrc) {
      // 控制是否显示整个预览的组件
      this.isShow = !this.isShow;
      // 添加iframe显示的src链接内容
      this.iframeSrc = iframeSrc;
      // 每次进入时都先spin加载
      this.isSpin = true;
    },
    /**
       * 控制全屏和小屏的实现方法
       */
    fullScreen() {
      const element = document.getElementsByClassName('file-preview-wrapper')[0];
      // 如果当前全屏则退出全屏
      if (this.isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        // 如果当前非全屏则进入全屏
      } else if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    },
    /**
       * iframe加载结束
       */
    finishLoad() {
      // 显示iframe内容
      this.$refs.inlineiframe.style.display = 'block';
      // spin停止加载
      this.isSpin = false;
    },
  },
  render() {
    return this.isShow
      ? (
        <div class='file-preview-wrapper' >
          <div class='back' onClick={this.show}><a-icon type="close-circle" /></div>
          <div class='full-screen' onClick={this.fullScreen}>
            {this.isFullScreen ? (<a-icon type="fullscreen-exit" />) : (<a-icon type="fullscreen" />)}
          </div>
          <a-spin wrapperClassName="file-preview-wrapper-context" spinning={this.isSpin} >
            <iframe class="file-preview-wrapper-context-frame"
              ref='inlineiframe'
              title="文件预览"
              width="100%"
              height="100%"
              frameborder="0" scrolling="auto"
              src={this.iframeSrc}
              onLoad={this.finishLoad}>
            </iframe>
          </a-spin>
        </div>
      ) : null;
  },
};
</script>

<style lang="scss" >
@import "./index.scss";
</style>

index.scss样式设置

$icon-size:60px;
.file-preview-wrapper{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999999;
  background-color: $text-color;
  &-context{
    width: 100%;
    height: 100%;
    max-height: 100%;
    .ant-spin{
      max-height: 100% !important;
    }
    .ant-spin-container{
      width: 100%;
      height: 100%;
      max-height: 100%;
    }
    &-frame{
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: none;
    }
  }
}
.back{
  position: fixed;
  right: 4%;
  bottom: 20px;
  z-index: 9999999;
  font-size: $icon-size;
  width: $icon-size;
  height: $icon-size;
  background-color:$text-color;
  color: white;
  border-radius: 50%;
  
  .anticon-close-circle{
    vertical-align: top;
    transition: transform 0.5s;
    &:hover{
      transform: rotate(90deg);
    }
  }
}
.full-screen{
  position: fixed;
  right: 4%;
  bottom: 100px;
  z-index: 9999999;
  font-size: $icon-size;
  width: $icon-size;
  height: $icon-size;
  background-color:$text-color;
  color: white;
  border-radius: 50%;
  .anticon-fullscreen-exit{
    vertical-align: top;
    transition: transform 0.5s;
    &:hover{
      transform: rotate(90deg);
    }
  }
  .anticon-fullscreen{
    vertical-align: top;
    transition: transform 0.5s;
    &:hover{
      transform: rotate(90deg);
    }
  }
}

2、组件封装

在main.js中全局引入：

import Vue from 'vue';
import store from '@/Stores';
import router from '@/Routes';
import AntD from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
// 导入文件预览的插件
import FilePreview from '@/Components/Common/FilePreview';
import App from './App.vue';

Vue.config.productionTip = false;

/**
 * 组件 - Ant Design - Vue 实现
 */
Vue.use(AntD);
/**
 * 文件预览插件引用
 */
Vue.use(FilePreview);

new Vue({
  store,
  router,
  render: (h) => h(App),
}).$mount('#app');

index.js挂载组件内容和方法等：

import FilePreview from './Component.vue';

const filePreview = {};

filePreview.install = function (Vue) {
  // Vue.component(FilePreview.name, FilePreview);

  // 1.创建组件构造器
  const FilePreviewConstructor = Vue.extend(FilePreview);

  // 2.根据组件构造器创建一个组件对象
  const filepreview = new FilePreviewConstructor();

  // 3.把toast组件对象挂载到新的元素div中
  filepreview.$mount(document.createElement('div'));

  // 4.toast.$el对应的就是div
  document.body.appendChild(filepreview.$el);

  // 在原型中定义$toast
  Vue.prototype.$filePreview = filepreview;
};

export default filePreview;

3、其他页面进行封装的插件的调用

<script>
export default {
  name: 'SystemHome',
  data() {
    return {

    };
  },
  methods: {
    show() {
    //调用插件的方法，传入iframe的src
      this.$filePreview.show('https://blog.youkuaiyun.com/weixin_46115860/article/details/107468734');
    },
  },
  render() {
    return (
      <div class="system-home">
        欢迎来到首页
      <button onClick = {this.show}>文件预览</button>
      </div>

    );
  },
};
</script>