vue实现全屏、退出全屏方法

news2024/9/17 8:52:22

有效解决问题 : Failed to execute ‘exitFullscreen‘ on ‘Document‘: Document not active 

在未全屏的情况下触发exitFullscreen,会报这个错。

<el-button class="screen" @click="toggleFullscreen">全屏</el-button>
fullscreen: false
// 全屏、退出全屏切换
    toggleFullscreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
mounted() {
    // 退出全屏后要执行的动作
    window.onresize = ()=>{
        let isFull = document.mozFullScreen||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
        if(isFull === undefined) {
          this.fullscreen = false;
        }
      
    }

  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/835811.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity 编辑器选择器工具类Selection 常用函数和用法

Unity 编辑器选择器工具类Selection 常用函数和用法 点击封面跳转下载页面 简介 在Unity中&#xff0c;Selection类是一个非常有用的工具类&#xff0c;它提供了许多函数和属性&#xff0c;用于操作和管理编辑器中的选择对象。本文将介绍Selection类的常用函数和用法&#xff…

Redis面试题2

Redis面试题-2 10、统计高并发网站每个网页每天的 UV 数据&#xff0c;结合Redis你会如何实现&#xff1f; 选用方案&#xff1a;HyperLogLog 如果统计 PV 那非常好办&#xff0c;给每个网页一个独立的 Redis 计数器就可以了&#xff0c;这个计数器的 key 后缀加上当天的日期…

loguru 日志库

1 下载地址 loguru PyPI 2 安装 pip install loguru 3 简单使用 from loguru import logger# 当前目录下创建 log 文件夹&#xff0c;保留 3 天 logger.add("./Log/INFO_{time:YYYY-MM-DD}.log", encoding"utf-8", retention"3 day")logger.…

JUC并发编程(一)JUC工具使用

文章目录 Synchronizedsynchronized解决 Lock锁synchronized锁与Lock锁的区别 生成者消费者问题synchronized实现lock版实现- conditioncondition实现精准通知唤醒 CallableJUC常用辅助类CountDownLatch&#xff08;倒计时器&#xff09;CyclicBarrier&#xff08;循环栅栏&…

Find My资讯|AirTag 2或将在明年底量产,苹果Find My应用全面

AirTag 2021 年和 2022 年出货量预计在 2000 万个和 3500 万个。如果 AirTag 出货量继续增长&#xff0c;苹果大概率会开发第二代产品。郭明錤现更新了其预测报告&#xff0c;他表示&#xff0c;苹果 AirTag 2 可能会在明年第四季度量产。 AirTag 是用于固定在背包、行李和其…

Typora未保存报错闪退

Typora未保存报错闪退 在使用Typora编写笔记时&#xff0c;可能会遇到没有保存就退出的情况&#xff0c;也可能软件突然崩溃导致之前的笔记没有保存&#xff0c;实际上Typora会自动保存记录在本地文件中&#xff0c;接下来我们进行恢复。 点击左上角文件标签&#xff0c;进入…

《Gradle构建脚本的基本结构和语法》

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

【Python机器学习】实验08 决策树

文章目录 决策树1 创建数据2 定义香农信息熵3 条件熵4 信息增益5 计算所有特征的信息增益&#xff0c;选择最优最大信息增益的特征返回6 利用ID3算法生成决策树7 利用数据构造一颗决策树Scikit-learn实例决策树分类决策树回归Scikit-learn 的决策树参数决策树调参 实验1 通过sk…

学习笔记|简单分享一下自建Gravatar镜像

目录 前言 Gravatar 使用 思路 操作 步骤一&#xff1a;注册或登录华为云 步骤二&#xff1a;创建委托账号 步骤三&#xff1a;创建OBS桶 步骤四&#xff1a;数据回源配置 步骤五&#xff1a;配置生命周期规则 步骤六&#xff1a;绑定自定义域名 步骤七&#xff1a…

学习Android嵌入式需要做哪些准备?

首先嵌入式系统可以分为四个层次&#xff1a;硬件层、驱动层、系统层和应用层&#xff0c;其中每一个层次都会有一类专业的学生适合深入学习。硬件层就适合电子、通信、机电等学生&#xff0c;驱动层因为比较难&#xff0c;按我的理解都是需要从硬件层和应用层过渡。而应用层就…

LNMP原理及安装

LNMP: 目前成熟的企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件能够提供静态页面服务&#xff0c;也可以提供动态web服务 LNMP的组成: L &#xff1a;表示linux系统&#xff0c;操作系统N &#xff1a;表示nginx网站服务&#xff0c;前端&#xf…

项目运行时出现:“listen EADDRINUSE: address already in use :::3002“

listen EADDRINUSE: address already in use :::3002 解决&#xff1a;查找对应 pid&#xff1a; netstat -ano PS C:\Users\admin\Desktop\chatgpt-web\service> netstat -ano 控制台输入&#xff1a;taskkill -f /pid 25420&#xff08;抓图是别的进程&#xff09; 结…

08. 容器间通信

目录 1、前言 2、容器间通信 2.1、通过IP地址进行通信 2.2、通过DNS Server进行通信 2.3、通过Joined方式通信 3、容器跨节点通信 3.1、通过容器在宿主机上的端口映射实现 3.2、通过Docker Overlay网络实现 4、小结 1、前言 上一篇《07.Docker网络通信模式》我们初步认…

LeetCode--HOT100题(17)

目录 题目描述&#xff1a;41. 缺失的第一个正数&#xff08;困难&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;41. 缺失的第一个正数&#xff08;困难&#xff09; 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时…

harbor搭建

回到目录 Harbor 是 VMware 公司开源的企业级 Docker Registry 项目&#xff0c;其目标是帮助用户迅速搭建一个企业级的 Docker Registry 服务 通俗的讲&#xff0c;harbor是一个私人镜像存储服务器 1 下载安装 进入官网&#xff0c;下载一个离线安装包,harbor官网下载 这…

命令模式 Command Pattern 《游戏设计模式》学习笔记

对于一般的按键输入&#xff0c;我们通常这么做&#xff0c;直接if按了什么键&#xff0c;就执行相应的操作 在这里我们是将用户的输入和程序行为硬编码在一起&#xff0c;这是我们很自然就想到的最快的做法。 但是如果这是一个大型游戏&#xff0c;往往我们需要实现一个按键…

tinkerCAD案例:33. 在 Tinkercad 中使用标尺工具

在 Tinkercad 中使用标尺工具 Using the Ruler Tool in Tinkercad 在 Tinkercad 中使用标尺工具 Introduction: Using the Ruler Tool in Tinkercad 简介&#xff1a;在 Tinkercad 中使用标尺工具 For those that may not know Tinkercad is a web based 3D modeling tool.…

vue 浏览器右侧可拖拽小组件

目录 0. 使用场景 1. 动图示例 2. 实现方式 2.1 创建drag.js 2.2 使用v-drag 3. 结尾 0. 使用场景 很多网页在浏览器右侧有"导航"或者“智能助手”的悬浮小气泡框&#xff0c;比如我们的csdn☞ 作为页面友好型的引导标注&#xff0c;某些场景下这些小气泡可以…

MacBook触控板窗口管理 Swish for Mac

Swish for Mac是一款用于通过手势来控制mac应用窗口的软件&#xff0c;你可以通过这款软件在触控板上进行手势控制&#xff0c;你可以在使用前预设好不同手势的功能&#xff0c;然后就能直接通过这些手势让窗口按照你想要的方式进行变动了 Swish 支持 Haptick Feedback 震动反…

途乐证券|互联金融概念爆发,安硕信息“20cm”涨停,高伟达等大涨

互联金融概念4日盘中强势拉升&#xff0c;截至发稿&#xff0c;安硕信息“20cm”涨停&#xff0c;高伟达、卓创资讯、慧博云通涨超12%&#xff0c;恒银科技、极点软件亦涨停&#xff0c;指南针涨超9%&#xff0c;金证股份涨逾7%。 高伟达昨日在投资者互动平台表明&#xff0c;公…