浏览器页面全屏完美解决

浏览器页面全屏完美解决

当通过点击事件调取全屏的时候，键盘事件退出全屏、监视点击事件改变图标的函数不会触发、你又得加一个监听键盘事件的函数、用键盘事件又有两个按键会触发全屏。当想用监听浏览器视口变化时候、打开控制台也会触发、放大缩小视口也会触发、里面还会遇到一个死循环。总之就是麻烦！

​ 使用插件完美解决。它把非全屏事件 全部可能性 都包含了 直接返回false 只要是全屏了 就返回true

下载引入screenfull 插件

npm install screenfull --save

//在调用全屏功能的组件中引入
import screenfull from 'screenfull' 

//定义一个 方法 图标的单独的点击事件

//全屏
const toggleFullscreen = () => {

  screenfull.toggle();  //直接调用全屏方法  这里就可以直接用这个点击事件简单的放大缩小
};

onMounted(() => {
  window.onresize = () => {
	   showicon = screenfull.isFullscreen  //isScreenFull这个是我用来控制图标改变的     true就用xxx  flase就用yyy
     //screenfull.isFullscreen 自带的属性调用
	 }
});
//放在这个钩子里面就可以监视窗口变化了

//属性
screenfull.isFullscreen; // 布尔值——  判断当前页面是否 全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否 支持全屏

//方法
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

指定元素全屏

let myImg = ref() //获取DOM

    <img
      ref="myImg"
      width="100"
      src="https://tenfei02.cfp.cn/creative/vcg/veer/1600water/veer-385736296.jpg"
      alt=""
    />
    <i class="el-icon-data-line" @click="toggleFullScreen">点击全屏</i>

toggleFullScreen() {
  if (screenfull.isEnabled) { //判断时候支持全屏
    screenfull.toggle(myImg);  //切换全屏 用ref获取dom
  }
},