vue如何全屏(点击一个按钮界面全屏展示)

news2024/11/18 7:47:08

1,在界面上设置一个div,让用户点击后全屏或者退出全屏。

      <div class="full-screen" @click="toFullOrExit">
        <img :src="fullImg"/>
      </div>

在这里插入图片描述

2,进入全屏和退出全屏的方法

    requestFullScreen () {
      let de = document.documentElement
      if (de.requestFullscreen) {
        de.requestFullscreen()
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen()
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen()
      }
    },
    exitFullscreen () {
      let de = document
      if (de.exitFullscreen) {
        de.exitFullscreen()
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen()
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen()
      }
    },
    toFullOrExit () {
      this.isFull = !this.isFull
      if (this.isFull) {
        this.fullImg = require('@/assets/images/quxiaoquanping.png')
        this.requestFullScreen()
      } else {
        this.fullImg = require('@/assets/images/quanping.png')
        this.exitFullscreen()
      }
    }

这段代码是使用 JavaScript 实现的全屏功能。它定义了三个函数:requestFullScreen()、exitFullscreen() 和 toFullOrExit()。
requestFullScreen() 函数用于请求浏览器进入全屏模式。它首先获取 document.documentElement(文档的根元素),然后通过判断不同浏览器对全屏模式的实现方式,使用对应的方法请求浏览器进入全屏模式。
exitFullscreen() 函数用于退出全屏模式。它同样获取 document,然后通过判断不同浏览器对退出全屏模式的实现方式,使用对应的方法退出全屏模式。
toFullOrExit() 函数是一个触发全屏模式的开关。它根据 this.isFull 的值来决定是进入全屏模式还是退出全屏模式。如果 this.isFull 为真,表示当前需要进入全屏模式,于是将 this.fullImg 设置为一个全屏图片的路径,并调用 requestFullScreen() 函数进入全屏模式;如果 this.isFull 为假,表示当前需要退出全屏模式,于是将 this.fullImg 设置为一个普通图片的路径,并调用 exitFullscreen() 函数退出全屏模式。
总的来说,这段代码实现了在网页中切换全屏模式和普通模式的功能,并可以根据不同浏览器的兼容性来调用相应的全屏方法。

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

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

相关文章

Tableau 和 Qlikview哪个更好用?

Tableau 和 Qlikview 是市场上用于分析数据的两种重要的 BI 工具&#xff0c;并配备了广泛的可视化效果。本文将全面概述每个工具&#xff0c;以及基于业务、技术和可视化三个主要类别的基本差异。每个公司都希望用最好的BI工具来处理大量数据。在这篇文章中&#xff0c;我们将…

Rust语言从入门到入坑——(11)面向对象

文章目录 0、引入1、封装2、继承3、多态4、引用 0、引入 Rust 不是面向对象的编程语言&#xff0c;但是可以实现面向对象方法&#xff1a;封装与继承&#xff0c;以及不完全的多态 1、封装 "类"往往是面向对象的编程语言中常用到的概念。"类"封装的是数据…

关于IE11的样式兼容问题记录

1、布局如下 <div class"map-label" :class"{active:isActive}" :style"{marginTop:${marTopVal}px}"><transition name"slide-fade"><div class"transition-out" v-if"show"><div class&q…

使用VSCode开发Unity中排除(隐藏)一些文件

使用VSCode开发Unity中排除&#xff08;隐藏&#xff09;一些文件 再使用VDCode开发的时候会将项目中的全部文件都显示出来&#xff0c;不像VS一样只显示一些可能用的到的文件。再VSCode中需要设置一些文件的过滤来只显示想要显示的文件。 打开VScode&#xff0c;打开设置搜索…

如何使用ChatGPT处理excel

用ChatGPT处理excel&#xff0c;我们需要用到的主要工具是ChatGPT和vba代码。 VBA代码是一种用于Excel&#xff0c;Word&#xff0c;PPT的Microsoft Office软件的编程语言。 可以让用户通过编写一些简单的指令和操作&#xff0c;实现自动化、自定义和数据处理等功能。 就像你编…

从0开始,部署基于yangjianxin开发的流萤(Firefly)中文对话式大语言模型的http服务端

项目介绍: Firefly&#xff08;流萤&#xff09; 是yangjianxin开发的开源的中文大语言模型项目&#xff0c;本文主要实现将此模型部署到http服务器上&#xff0c;语言实现:python&#xff0c;本项目为双创项目后端部分代码(本人根据firefly训练代码修改微调的模型暂不方便开源…

分类预测 | MATLAB实现GA-GRU遗传算法优化门控循环单元的数据多输入分类预测

分类预测 | MATLAB实现GA-GRU遗传算法优化门控循环单元的数据多输入分类预测 目录 分类预测 | MATLAB实现GA-GRU遗传算法优化门控循环单元的数据多输入分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现GA-GRU遗传算法优化门控循环单元的数据多输入分类预…

elementui el-table-column表头换行,自定义表头以及排序图标的位置放置

目录 1、普通表头换行⭐️想实现以下效果 2、表头换行时调整文字和排序图标的位置⭐️想实现以下效果遇到问题 效果如下遇到问题 效果如下⭐️最终成功实现以下效果 &#x1f44d;写在最后 1、普通表头换行 https://www.jb51.net/article/228935.htm // 在需要换行的地方加入换…

一个类似AOV或者AOE的数据结构的类似排序的算法

背景: 一个东西的执行有多个入参和出参, 一个东西的出参又可以是别的东西的入参, 因此执行的依赖关系. 草图里a b c d e f为三个东西, 上面的数字是入参,下面的数字是出参 当前已知这6个东西, 和他们的入参出参 求他们的运行顺序. 要求同样执行顺序的东西可以并行执行. 代码如…

【图像处理OpenCV(C++版)】——5.4 图像平滑之中值平滑(滤波)

前言&#xff1a; &#x1f60a;&#x1f60a;&#x1f60a;欢迎来到本博客&#x1f60a;&#x1f60a;&#x1f60a; &#x1f31f;&#x1f31f;&#x1f31f; 本专栏主要结合OpenCV和C来实现一些基本的图像处理算法并详细解释各参数含义&#xff0c;适用于平时学习、工作快…

IntelliJ IDEA - 一篇解决如何多模块项目提交到同一个 Git 仓库

问题描述 事情是这样的&#xff0c;最近新建了一个项目&#xff08;多模块&#xff09;&#xff0c;这个不必多说大家就知道长什么样子&#xff08;文件结构&#xff09;&#xff0c;问题是在我写完后想提交项目到 Git 仓库时&#xff0c;发现每个模块都要设置 Remote Git 地址…

Get “https://xx.xx.x.xx/v2/“: x509: certificate signed by unknown authority

问题描述 使用Windows docker客户端login docker私库&#xff0c;无法登录提示&#xff1a; Get "https://xx.xx.x.xx/v2/": x509: certificate signed by unknown authority原因分析&#xff1a; 由于harbor做了ssl&#xff0c;通常客户端连接需要配置证书 解决方…

Hbuilder打包android安装包流程

Hbuilder打包android安装包流程 第一步打开项目文件的manifest.json,在右侧填写具体项目应用信息&#xff0c;每次打包升级前版本号一定要设置的比上版本的高。 点击App图标配置&#xff0c;选择图标资源进行全量生成。 点击菜单”发行”&#xff0c;选择云打包&#xff0c…

十分钟实现 Android Camera2 相机预览

1. 前言 因为工作中要使用Android Camera2 API&#xff0c;但因为Camera2比较复杂&#xff0c;网上资料也比较乱&#xff0c;有一定入门门槛&#xff0c;所以花了几天时间系统研究了下&#xff0c;并在CSDN上记录了下&#xff0c;希望能帮助到更多的小伙伴。 2. Camera2 API …

Lenovo联想Yoga 14s 2021AMD平台ARH版(82LB)原装Win10系统镜像 恢复出厂OEM预装系统

lenovo联想笔记本电脑&#xff0c;Yoga 14s 2021AMD平台ARH版(82LB)原装出厂Windows10系统&#xff0c;原厂OEM预装自带系统镜像 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、联想电脑管家等预装程序 所需要工具&#xff1a;16G或以上的U盘 文件格式&#xff1a;I…

轻松掌握财务报表的二十二个知识点

财务报表&#xff0c;一是会看资产负债表。知道所在企业的家底有多厚&#xff0c;都分布在什么地方;二是会看利润表。知道企业赚了多少钱&#xff0c;是盈利还是亏损了&#xff0c;赚钱赚在哪里&#xff0c;亏钱亏到了何地;知道企业总共赚了多少钱。三是会看现金流量表。知道企…

软件测试技能,JMeter压力测试教程,Plugins Manager插件管理器(十三)

前言 前面讲了JDBC连接数据库的时候&#xff0c;需下载mysql对应的jar包&#xff0c;放到lib\ext目录下就可以使用了 jmeter 有个插件管理器Plugins Manager&#xff0c;可以方便的管理其他插件的下载和更新 一、插件管理器Plugins Manager 下载地址&#xff1a;Install ::…

6.28黄金能否守住关键支撑,今日多空如何布局

近期有哪些消息面影响黄金走势&#xff1f;今日黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周三&#xff08;6月28日&#xff09;亚市盘中&#xff0c;现货黄金窄幅震荡&#xff0c;现交投于1916美元/盎司附近&#xff0c;隔夜公布的美国经济数据强劲&#…

CSS中常用的颜色格式

本文翻译自 Color Formats in CSS&#xff0c;作者&#xff1a;Joshwcomeau。 略有删改 CSS 中的颜色格式可以采用不同的表示方式&#xff0c;包括常用的十六进制、RGB、RGBA、HSL 和 HSLA 等格式。十六进制是最常用的格式&#xff0c;使用 6 个十六进制数字来表示颜色&#xf…

netwox网络工具的使用【网络工程】(保姆级图文)

目录 1. 打开工具功能菜单查看某方面的模块使用搜索功能得到要使用的模块功能编号 查询模块的帮助信息总结 欢迎关注 『网络工程专业』 系列&#xff0c;持续更新中 欢迎关注 『网络工程专业』 系列&#xff0c;持续更新中 温馨提示&#xff1a;对虚拟机做任何设置&#xff0c;…