vue中对监听esc事件和退出全屏问题的解决方案
目录
- 对监听esc事件和退出全屏问题的解决
- 下面是全屏的完整代码
- element+vue全屏与退出全屏(监听ESC改样式)
- 一、效果
- 二、代码
对监听esc事件和退出全屏问题的解决
vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件
mounted() { let that = this window.addEventListener('resize', function () { if (!that.isFullScreen()) { // 非全屏状态 //业务逻辑 } }); }
下面是全屏的完整代码
methods: { //全屏 fullele() { return ( document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || null ); }, //判断是否全屏 isFullScreen() { return !!(document.webkitIsFullScreen || this.fullele()); }, //退出全屏 exitFullscreen() { this.fullScreenFlag = false; if (document.exitFullScreen) { document.exitFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }, //全屏 full(ele) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } else if (ele.msRequestFullscreen) { ele.msRequestFullscreen(); } }, //切换是否全屏 全屏按钮要执行的方法 toggleFullScreen() { if (this.isFullScreen()) { this.exitFullscreen(); } else { this.fullScreenFlag = true; this.full(document.getElementById("dataMointor")); //要设置全屏的元素 } } }
element+vue全屏与退出全屏(监听ESC改样式)
一、效果
esc退出会监听
二、代码
bom.js(工具)
/** * 浏览器全屏 * @param {HTMLElement} [el=document] 全屏元素 */ export function fullScreen(el) { el = el || document.documentElement; const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen; if (typeof rfs !== 'undefined' && rfs) { rfs.call(el); } } /** * 退出全屏 */ export function exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } /** * 浏览器当前是否全屏 * @return {*|boolean} */ export function isFullScreen() { return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen }
design.js(通用)
function toggle(ele, that, exitFullScreen, fullScreen) { if (that.isFullScreen) { exitFullScreen() that.isFullScreen = false } else { fullScreen(document.getElementById(ele)) that.isFullScreen = true } } export default { testVueThis, toggle }
- index.vue(示例)
<template> <my-panel fit id="test" :shadow="'never'" :border="false" title="cs"> <div id="test"> <div > <span>cs123</span> 123 </div> <el-tooltip :content="tooltipText"> <span style="cursor: pointer"> <i :class="icon" style="font-size: x-large" @click="toggle"></i> </span> </el-tooltip> </div> </my-panel> </template>
<script> import Design from '@/utils/design' import { fullScreen, exitFullScreen, isFullScreen } from '$ui/utils/bom' export default { data() { return { isFullScreen: false } }, computed: { icon() { return this.isFullScreen ? 'el-icon-switch-button' : 'el-icon-full-screen' }, tooltipText() { return this.isFullScreen ? '退出全屏' : '全屏' } }, created() { // 初始化监听器 this.resizeListener() }, methods: { resizeListener() { const that = this window.addEventListener('resize', function () { if (!isFullScreen()) { if (!isFullScreen()) { that.isFullScreen = false } } }) }, toggle() { Design.toggle('test', this, exitFullScreen, fullScreen) } } } </script> <style> </style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)