1: Display all content of the page in full screen
<span style="color:#918F8F" @click="clickFun">
<img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
{
{isFullFlag?'退出全屏':'全屏'}}
</span>
<script>
export default {
data(){
return{
isFullFlag:false
}
}
mounted() {
// 监听页面全屏
window.addEventListener("fullscreenchange", (e)=> {
if(screenfull.isFullscreen){
this.isFullFlag = true
}else{
this.isFullFlag = false
}
})
},
methods:{
clickFun(){
this.isFullFlag =!this.isFullFlag
if (!screenfull.enabled) {
this.$message({
message: 'Your browser does not work',
type: 'warning'
})
return false
}
screenfull.toggle()
}
}
}
</script>2. Part of the content of the full screen page
<template>
<span style="color:#918F8F" @click="clickFun">
<img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
{
{isFullFlag?'退出全屏':'全屏'}}
</span>
<!--需要全屏展示的内容-->
<div id="content"></div>
</template>
<script>
export default {
data(){
return{
isFullFlag:false
}
}
mounted() {
// 监听页面全屏
window.addEventListener("fullscreenchange", (e)=> {
if(screenfull.isFullscreen){
this.isFullFlag = true
}else{
this.isFullFlag = false
}
})
},
methods:{
clickFun(){
this.isFullFlag =!this.isFullFlag
const element = document.getElementById('content');//指定全屏区域元素
if(this.isFullFlag){
// screenfull.request(element);
element.requestFullscreen()
}else{
document.exitFullscreen();
}
}
}
}
</script>Note: The same ID of a tab can only be opened in full screen once. If there are multiple contents that need to be opened in full screen, please set different IDs.