|
|
@@ -2,7 +2,7 @@
|
|
|
<template>
|
|
|
<div class="imageText-preview" :style="getAreaStyle()">
|
|
|
<SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
|
|
|
- <div ref="fullscreenElement">
|
|
|
+ <div ref="fullscreenElement" :class="[full_type ? 'full-screen-games' : '']">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:class="[full_type ? 'exit-btn' : '']"
|
|
|
@@ -45,6 +45,7 @@ export default {
|
|
|
data: getH5GamesData(),
|
|
|
games_url: '',
|
|
|
full_type: false,
|
|
|
+ scroll_top: 0, // 预览时滚动的高度 切换全屏时使用
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -57,7 +58,13 @@ export default {
|
|
|
created() {
|
|
|
this.initData();
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ document.addEventListener('keyup', (e) => {
|
|
|
+ if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27) {
|
|
|
+ this.full_type = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
methods: {
|
|
|
initData() {
|
|
|
this.data.file_list.forEach((item) => {
|
|
|
@@ -72,36 +79,16 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
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();
|
|
|
+ const div = document.querySelector('.main-container');
|
|
|
+ if (div) {
|
|
|
+ if (this.full_type) {
|
|
|
+ div.scrollTop = this.scroll_top;
|
|
|
+ } else {
|
|
|
+ this.scroll_top = div.scrollTop;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ this.full_type = !this.full_type;
|
|
|
},
|
|
|
/**
|
|
|
* 获取无文本内容的数据结构，用于保存为个人模板时的样式模板
|
|
|
@@ -135,4 +122,13 @@ export default {
|
|
|
top: 10px;
|
|
|
left: 10px;
|
|
|
}
|
|
|
+
|
|
|
+.full-screen-games {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99999;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
</style>
|
