1.vue中如何快速实现页面的全屏?
案例1:点击fullScreen按钮(icon),实现整个页面的全屏:
代码:
<a-icon type="fullscreen"
style="font-size: 22px;margin-left: 10px;"
id="fullscreen_button"
@click="handleFullScreen()"
/>
export default {
name: "index",
data(){
return{
fullscreen: false
}
},
methods:{
handleFullScreen(){
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;
}
}
}
2.vue中如何实现页面的指定元素全屏?
安装依赖(有淘宝镜像用cnpm,没有就npm):
cnpm install screenfull --save
引入需要全屏的页面中使用:
import screenfull from "screenfull";
给要点击实现全屏的按钮和全屏的区域元素设置id:
<a-icon type="fullscreen"
style="font-size: 22px;margin-left: 10px;"
id="fullscreen_button"/>
<div id="container_max">
<a-row :gutter="24">
<a-col :sm="24" :md="18" :xl="18">
<div
:style="{ width: '100%', height: scrollHeight - 60 + 'px', border: '1px solid #ccc', padding: '10px' }">
<h3 style="font-weight: bolder;">图片</h3>
<img src="../../assets/images/confImg.jpg" alt="" style="width: 100%; height: 100%;">
</div>
</a-col>
<a-col :sm="24" :md="6" :xl="6">
<div :style="{ width: '100%', height: scrollHeight - 60 + 'px', border: '1px solid #ccc', padding: '10px' }">
<h3 style="font-weight: bolder;">视频</h3>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoplay controls style="width: 100%; height: auto;"></video>
</div>
</a-col>
</a-row>
</div>
mounted() {
const element = document.getElementById('container_max');//指定全屏区域元素
document.getElementById('fullscreen_button').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element);
}
});//实现模块全屏
}