关注
客服
刷新
更多
编辑
回到顶部
回到底部
客服二维码

vue实现浏览器全屏以及退出全屏

  1. 在src/utils/util.js中加入下面代码块
import Vue from 'vue'
const util = Vue.prototype.util = {}
// 切换全屏
util.fullScreen = function (element) {
element = element || document.body;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏
util.exitFullscreen = function () {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
export {
util
}

2、在页面中使用全屏/退出全屏

<template>
<div class="header">
<!-- 全屏 -->
<a v-if="fullScreenFlag" href="javascript:;" class="iconfont iconquanping" title="全屏" @click="fullScreen()"></a>
<!-- 退出全屏 -->
<a v-else href="javascript:;" class="iconfont icontuichuquanping1" title="退出全屏" @click="exitFullScreen()"></a>
</div>
</template>
<script>
export default {
data () {
return {
fullScreenFlag: true,
};
},
methods: {
// 全屏
fullScreen(){
this.fullScreenFlag = false;
this.util.fullScreen();
},
// 退出全屏
exitFullScreen() {
this.fullScreenFlag = true;
this.util.exitFullscreen();
},
},
};
</script>
posted @   勋染  阅读(102)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示