这是做好的成品效果,样式可根据需求自行修改
话不多说直接上代码
<template>
<div class="full">
<a-button type="primary" @click="screen">点击显示全屏</a-button>
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
fullscreen: false
}
},
methods: {
screen() {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} 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.fullscreen = !this.fullscreen;
}
}
}
</script>
<style>
.full{
position: absolute;
width: 130px;
height: 50px;
line-height: 50px;
right: 100px;
background: rgba(21, 108, 207, 0.8);
border-radius: 30px;
text-align: center;
}
</style>