eep_page/src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="imageText-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
    <div ref="fullscreenElement">
      <el-button
        type="primary"
        :class="[full_type ? 'exit-btn' : '']"
        style="margin-bottom: 10px"
        :style="{
          background:
            data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
          borderColor:
            data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
        }"
        @click="toggleFullScreen"
        >{{ full_type ? '退出全屏' : '进入全屏' }}</el-button
      >
      <iframe :src="games_url" width="100%" :height="full_type ? '100%' : '580px'" style="border: none"></iframe>
    </div>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import { getH5GamesData } from '@/views/book/courseware/data/h5Games';
import { H5StartupFile } from '@/api/app';
export default {
  name: 'H5GamesPreview',

  components: {},
  mixins: [PreviewMixin],
  data() {
    return {
      data: getH5GamesData(),
      games_url: '',
      full_type: false,
    };
  },
  watch: {
    'data.file_list.length': {
      handler() {
        this.initData();
      },
    },
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.data.file_list.forEach((item) => {
        const suffix = item.file_name.slice(item.file_name.lastIndexOf('.') + 1, item.file_name.length).toLowerCase();
        if (suffix === 'html') {
          this.games_url = item.file_url;
        } else {
          H5StartupFile({ file_id: item.file_id, index_file_name: 'index.html' }).then((res) => {
            this.games_url = res.file_url;
          });
        }
      });
    },
    toggleFullScreen() {
      const elem = this.$refs.fullscreenElement; // 获取需要全屏的元素
      if (!document.fullscreenElement) {
        this.full_type = true;
        if (elem.requestFullscreen) {
          elem.requestFullscreen(); // 现代浏览器，如Chrome, Firefox, Opera, Safari等
        } else if (elem.mozRequestFullScreen) {
          // Firefox
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          // Chrome, Safari等
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
          // IE/Edge
          elem.msRequestFullscreen();
        }
      } else {
        this.full_type = false;
        if (document.exitFullscreen) {
          document.exitFullscreen(); // 退出全屏模式
        } else if (document.mozCancelFullScreen) {
          // Firefox
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          // Chrome, Safari等
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          // IE/Edge
          document.msExitFullscreen();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.exit-btn {
  position: fixed;
  top: 10px;
  left: 10px;
}
</style>