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

在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>

vue实现浏览器全屏以及退出全屏相关推荐

vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
vue中如何实现全全全屏和退出全屏？
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 " 最近总有人给我说ta有社恐,明明是有社牛好不好-- 前言在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏 ...
vue实现页面全屏和退出全屏
pc端使用vue实现页面全屏和退出全屏 element.requestFullScreen() -- 全屏显示 Element.requestFullscreen()方法用于异步请求使得Elemen ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue 全屏与退出全屏
vue 全屏与退出全屏实现点击展开全屏或退出全屏首先,安装 npm i screenfull@5 -S 然后在对应组件页面引入screenfull使用 <template><di ...
使用JavaScript使浏览器进入全屏或退出全屏
使用JavaScript使浏览器进入全屏或退出全屏首先使用fullscreenElement判断浏览器是否在全屏状态. 如果是:则调用exitFullscreen函数退出全屏,否则调用request ...
全屏、退出全屏---兼容各浏览器 IE Chrom 火狐 360极速模式/兼容模式
function events() {//全屏document.getElementById("btn").onclick = function () {var elem = do ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
python退出全屏_实现网页全屏和退出全屏JS代码，多浏览器兼容
js全屏和退出全屏代码|www.125jz.com 全屏显示退出全屏 function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var req ...
js 控制浏览器实现全屏和退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...

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

vue实现浏览器全屏以及退出全屏相关推荐

最新文章

热门文章