1、在vue项目下创建src/utils/util.js文件且加入如下代码:
javascript
import Vue from 'vue'
const util = Vue.prototype.util = {}
// 切换全屏
util.fullScreen = function (element) {
element = element || document.body;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏
util.exitFullscreen = function () {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
export {
util
}
2、vue页面加入全屏按钮及退出全屏按钮,功能实现如下:
javascript
<template>
<div ref="container" class="fit-container">
<el-button type="primary" v-if="fullScreenFlag==true" href="javascript:;" icon="el-icon-full-screen" size="mini" class="filter-item" @click="fullScreen()">全屏</el-button>
<el-button type="primary" v-if="fullScreenFlag==false" href="javascript:;" icon="el-icon-full-screen" size="mini" class="filter-item" @click="exitFullScreen()">退出全屏</el-button>
</div>
</template>
<script>
import Vue from "vue"; // 引入vue
import {util} from "../../util/utils"
export default {
data() {
return {
//全屏设置
fullScreenFlag:true,
};
},
methods: {
//全屏
fullScreen(){
this.fullScreenFlag = false;
this.util.fullScreen();
},
//退出全屏
exitFullScreen(){
this.fullScreenFlag = true;
this.util.exitFullscreen();
}
},
};
</script>
<style></style>