- 在src/utils/util.js中加入下面代碼塊
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、在頁(yè)面中使用全屏/退出全屏
<template>
<div class="header">
<!-- 全屏 -->
<a v-if="fullScreenFlag" href="javascript:;" class="iconfont iconquanping" title="全屏" @click="fullScreen()"></a>
<!-- 退出全屏 -->
<a v-else href="javascript:;" class="iconfont icontuichuquanping1" title="退出全屏" @click="exitFullScreen()"></a>
</div>
</template>
<script>
export default {
data () {
return {
fullScreenFlag: true,
};
},
methods: {
// 全屏
fullScreen(){
this.fullScreenFlag = false;
this.util.fullScreen();
},
// 退出全屏
exitFullScreen() {
this.fullScreenFlag = true;
this.util.exitFullscreen();
},
},
};
</script>
