需求描述:需要放大至全屏展示页面某块区域,并能退出全屏;
解决方案:案例使用vue实现,具体实现步骤如下
(1)数据定义【fullscreen】
(2)全屏方法定义
(3)方法绑定至元素点击事件
代码:
// 全屏事件
handleFullScreen(i) {
let element = document.getElementsByClassName("graph")[i];
let bottomEle = document.getElementsByClassName("bottom")[i];
let tabs = bottomEle.getElementsByClassName("tabs")[0];
let elTabsContent = tabs.getElementsByClassName("el-tabs__content")[0];
let graphCanvas = elTabsContent.getElementsByClassName("graph-canvas")[0];
if (this.fullscreen) {
tabs.style.height = "510px";
elTabsContent.style.height = "508px";
graphCanvas.style.height = "470px";
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
tabs.style.height = "100vh";
elTabsContent.style.height = "100vh";
graphCanvas.style.height = "92vh";
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;
},