快捷導(dǎo)航

vue中對(duì)監(jiān)聽esc事件和退出全屏問題的解決方案

更新時(shí)間：2022年08月09日 09:36:19 作者：砥礪前行?前程似錦

這篇文章主要介紹了vue中對(duì)監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

對(duì)監(jiān)聽esc事件和退出全屏問題的解決

vue 的項(xiàng)目中使用了 h5 的全屏 API，在使用esc鍵退出全屏?xí)r，默認(rèn)調(diào)用“ document.exitFullScreen() ” 直接退出，想要做監(jiān)聽并設(shè)置業(yè)務(wù)，需要監(jiān)聽屏幕size變化來出發(fā)事件

mounted() {
? ??
? ? let that = this
? ? window.addEventListener('resize', function () {
? ? ? ?if (!that.isFullScreen()) {
? ? ? ? ?// 非全屏狀態(tài)
? ? ? ? ?//業(yè)務(wù)邏輯
? ? ? ? ? ? ? ??
? ? ? ?}
? ? });
}

下面是全屏的完整代碼

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")); //要設(shè)置全屏的元素
        
      }
      
    }
 
}

element+vue全屏與退出全屏(監(jiān)聽ESC改樣式)

一、效果

在這里插入圖片描述

esc退出會(huì)監(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();
  }
}
/**
 * 瀏覽器當(dāng)前是否全屏
 * @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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: