<div class="quanp-txt" @click="screen">{{qpTxt}}</div>
data：
fullscreen:false,
qpTxt: '全屏',
method 里面：
screen(){
// let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果
let element = document.getElementById('quanp');//设置后就是 id=* 的容器全屏
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();
}
this.qpTxt = '全屏'
this.fullscreen = false
} else {
// 如果不是全屏就变成全屏
if(element){
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.qpTxt = '退出全屏'
this.fullscreen = true;
}
}
},
使用全屏遇到的问题：项目使用的是vue+element 导致dialog失效
tanchuang{
position: fixed;
top: 30%;
left: 20%;
width: 60%;
height: auto;
padding: 1.2% 3%;
background: rgba(6,69,115,0.68);
Box-shadow: 4px 0px 16px 0px rgba(22,26,52,0.89);
color: #fff;
}
全屏时滚动条失效，解决方案给内部内容块增加滚动条 设置样式为透明：
.gdt{
height: 70vh;
overflow-y: scroll;
overflow-x: hidden;
}
.gdt::-webkit-scrollbar{
width:0px;
height:auto;
background-color: rgba(255, 255, 255, 0);
border-radius: 4px;
}
.gdt::-webkit-scrollbar-track{
background: rgba(255, 255, 255, 0);
border-radius:4px;
}
.gdt::-webkit-scrollbar-thumb{
background: rgba(255, 255, 255, 0);
border-radius:4px;
}
.gdt::-webkit-scrollbar-thumb:hover{
background: rgba(255, 255, 255, 0);
}
.gdt::-webkit-scrollbar-corner{
background: rgba(255, 255, 255, 0);
}
全屏时el-select下拉失效，解决：
<el-select
filterable
v-model="queryParams.deptId"
placeholder="请选择"
:popper-append-to-body="false" //增加这一个即可解决
>
methods中写判断是否全屏的方法：
checkFull(){
//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
//火狐浏览器
var isFull = document.mozFullScreen||
document.fullScreen ||
//谷歌浏览器及Webkit内核浏览器
document.webkitIsFullScreen ||
document.webkitRequestFullScreen ||
document.mozRequestFullScreen ||
document.msFullscreenEnabled
if(isFull === undefined) {
isFull = false
}
return isFull;
},
在监听：
updated() {
// 作用域this===获取vue的实例
const that = this
window.addEventListener('resize', function () {
//如果直接在这里面使用this关键字，==结果是使用window这个对象
// debugger
if (!that.checkFull()) {
// 全屏下按键esc后要执行的动作
// isclick 为true 此时为全屏状态 false 为非全屏状态
if(!that.checkFull()) {
that.qpTxt = '全屏'
that.fullscreen = false
}
}
});
},
以上就是自己在做点击全屏时所遇到的问题以及解决方法，记录一下~
原文地址：https://www.jb51.cc/wenti/3283701.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
