<template>
<div class="about">
<div @click="allScreen1" class="all">大屏展示</div>
</div>
</template>
<script>
export default {
data() {
return {
allScreen:true
};
},
created() {},
methods: {
allScreen1() {
let element = document.documentElement;
if (!this.allScreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.allScreen = !this.allScreen
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
this.allScreen = !this.allScreen
}
}
}
};
</script>
<style scoped lang="less">
.all {
cursor: pointer;
}
</style>