vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
更新時間:2022年08月09日 09:36:19 作者:砥礪前行?前程似錦
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
對監(jiān)聽esc事件和退出全屏問題的解決
vue 的項目中使用了 h5 的全屏 API,在使用esc鍵退出全屏時,默認調用“ document.exitFullScreen() ” 直接退出,想要做監(jiān)聽并設置業(yè)務,需要監(jiān)聽屏幕size變化來出發(fā)事件
mounted() { ? ?? ? ? let that = this ? ? window.addEventListener('resize', function () { ? ? ? ?if (!that.isFullScreen()) { ? ? ? ? ?// 非全屏狀態(tài) ? ? ? ? ?//業(yè)務邏輯 ? ? ? ? ? ? ? ?? ? ? ? ?} ? ? }); }
下面是全屏的完整代碼
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(); } }, //切換是否全屏 全屏按鈕要執(zhí)行的方法 toggleFullScreen() { if (this.isFullScreen()) { this.exitFullscreen(); } else { this.fullScreenFlag = true; this.full(document.getElementById("dataMointor")); //要設置全屏的元素 } } }
element+vue全屏與退出全屏(監(jiān)聽ESC改樣式)
一、效果
esc退出會監(jiān)聽
二、代碼
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() { // 初始化監(jiān)聽器 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>
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue?elementui二次封裝el-table帶插槽問題
這篇文章主要介紹了vue?elementui二次封裝el-table帶插槽問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法,小編一一給大家列出來了,大家根據自身需要選擇,需要的朋友可以參考下2018-09-09