vue中如何实现全全全屏和退出全屏?

8ce325e19280fb182b40c8ad41f61597.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

最近总有人给我说ta有社恐,明明是有社牛好不好……

前言

在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏的功能,全屏指的是浏览器地址栏什么的都需要去掉……相当于和按f11一样的效果,于是就开始写~

代码实现

首先安装个依赖,代码如下:

npm install --save screenfull

在需要全屏的页面引入,代码如下:

import screenfull from "screenfull";

html的页面代码,集全屏的按钮,我这边写的是全屏的图标,代码如下:

<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" style="float: left;height: 53px;margin-right:10px"/><div @click="click" style="float: left;width: 56px;height: 14px;font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;line-height: 52px;color: #FFFFFF;opacity: 1;">全屏显示</div>

svg-icon为全屏的图标,当前页面已经是全屏时,图标就换成退出全屏的,否则还是全屏的图标。

click为全屏的点击事件。

因为我这边的全屏图标是在导航栏上,所以我需要通过路由的方式,跳转至需要全屏的界面。全屏的点击事件如下:

methods: {click() {//去大数据指挥中心驾驶舱//tag:区分是否要全屏显示//ismsg:给子组件里面传递的,看看是不是宽度要加200this.$router.push({ path:  "/dsjzhzx",query: {tag:true,ismsg:true},replace: true }).catch(()=>{});/* location.href="/yuetanhuizong";*//*if (!screenfull.isEnabled) {this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })return false;}screenfull.toggle();*/},
}

route下面的index.js中配置如下:

{path: '/dsjzhzx',component: (resolve) => require(['@/views/system/yuetanhuizong/index'], resolve),hidden: true},

最后在需要全屏的页面写如下代码:

mounted() {window.addEventListener("scroll", this.getScroll);//默认进来不全屏this.tag = this.$route.query.tag;this.isxianshi = this.$route.query.isxianshi;if(this.tag) {this.timer = setTimeout(() => {   //设置延迟执行this.ceshiClick();}, 100);}}
methods: {//全屏ceshiClick() {this.isFullScreen = !this.isFullScreen;this.isxianshi = false;screenfull.toggle();},
}

顺便说一下退出全屏吧,HTML中的代码如下:

<svg-icon :class="isxianshi?'yinchang':'xianshi'" :icon-class="isquanping?'exit-fullscreen':'fullscreen'" @click="tuichuquanping()" style="float: right;color:#FFFFFF;height: 53px;margin-right:3%"/>

vue中的代码如下:

//退出全屏tuichuquanping() {this.$router.push({path: "/tuichu", query: {tag: false,ismsg:false,isxianshi:false,kuan:this.windowWidth}, replace: true}).catch(() => {});},

全屏的图标:601b47f2c09dd41a20f2ff1e4b4cb4c3.png

退出全屏的图标:

4a406a568a2b5212219a4b330c2cbe7e.png
image-20211201180748713

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

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

相关文章

Spring MVC请求url无效问题思考

一、Controller没有配置 page not found or method not supported. 没有扫描到包里面的controller类 <context:component-scan base-package"com.mk.controller" /> 二、请求方式GET/POST org.springframework.web.servlet.PageNotFound noHandlerFound No…

P1160-队列安排【链表】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP1160 题目大意 有nn个人,编号是1&#x223C;n" role="presentation">1∼n1∼n&#xff0c;然后开始时插入第一个人&#xff0c;之后每次可以插入到一个人的左边或右边&#xff0…

【深圳】掌通宝科技有限公司技术总监(兼架构师),约吗

技术总监&#xff08;兼架构师&#xff09; 岗位职责&#xff1a; 1、主持研发中心日常管理工作&#xff0c;负责公司O2O平台,SaaS平台管理&#xff1b; 2、负责公司.net后台&#xff0c;Android客户端、IOS客户端、WEB平台等架构设计&#xff1b; 4、解决开发中的技术问题…

树层级处理上万条数据优化!

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言项目中&#xff0c;部门数超万&#xff0c;导致页面加载价卡顿怎么办&#xff1f;使用若依自带解析树的方法在本地运行没有任何问题&#xff0c;但是一发布到服务器上就显示加载超…

Idea Tomcat启动报异常CannotLoadBeanClassException

一、现象展现 Idea配置占用了C磁盘的所有空间&#xff0c;删除Idea配置目录后&#xff0c;改为D磁盘存储Idea配置。 由于idea的Artifact&#xff08;war explode包&#xff09;在没有整个项目重新构建情况下没有执行热发布&#xff0c;从而删除Artifact的war和war explode包&…

P3435-[POI2006]OKR-Periods of Words【KMP】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3435 大意 一个字符串&#xff0c;对于每个前缀&#xff0c;求复制一份放在末尾可以覆盖整个前缀的前缀&#xff0c;求所有的长度和。 解题思路 这道题如果暴力的话很简单&#xff0c;对于每个前缀每…

Orleans解决并发之痛(三):集群

Orleans本身的设计是一个分布式的框架&#xff0c;多个Silo构成集群&#xff0c;Grains分布在多个Silo中。一旦一个Silo挂了&#xff0c;原来归属这个Silo的Grains会自动在其他Silo中激活。生产环境下还是需要以集群方式来部署。 cluster 在Orleans解决并发之痛&#xff08;二…

avue中实现消息的实时展示

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言一个功能写了大半天&#xff0c;主要是数据表设计的有点复杂&#xff0c;且这个项目是10月份就写的放那的&#xff0c;里面有些东西都忘记了……先看数据库结构&#xff0c;然后理…

org.apache.ibatis.builder.BuilderException: Could not find value method on SQL annotation

转载自 mybatis 注解引发的bug&#xff0c;org.apache.ibatis.builder.BuilderException: Could not find value method on SQL anno Mybatis用注解开发且还用script标签 这种bug&#xff0c;网上一搜一大堆&#xff0c;但是都xml方式开发&#xff0c;大部分说的是返回类型或…

P2375-[NOI2014]动物园【KMP,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2375 题目大意 对于kmp操作&#xff0c;我们多求一个numnum数组&#xff0c;表示对于字符串SS的前i" role="presentation">ii个字符构成的子串&#xff0c;既是它的后缀同时又是它…

发达国家与发展中国家编程语言技术的分布差异性

近日&#xff0c;Stack Overflow在官方博客上发布了一组统计数据&#xff0c;表明发达国家与发展中国家在编程语言技术的采用上存在较大的差异。Stack Overflow对2017年1月至8月期间的访问数据进行了分析&#xff0c;选取了64个技术标签&#xff0c;每个标签所包含问题的访问次…

两个map中的数据,按照相同键,将所对应的值相加方法

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言最近写代码的时候遇到了个需求&#xff0c;刚开始想的时候&#xff0c;感觉不难&#xff0c;挺简单的&#xff0c;结果写的时候&#xff0c;各种思考、各种费脑&#xff0c;耗费了点…

mybatis example处理and、or关系的方法

转载自 mybatis example处理and、or关系的方法 1.( xx and xx) or ( xx and xx) 实例代码&#xff1a; BaUserExample baUserExample new BaUserExample();Criteria criteria1 baUserExample.createCriteria(); criteria1.andOrgIdEqualTo("1"); criteria1.an…

P2580-于是他错误的点名开始了【Trie,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2580 题目大意 给n个字符串&#xff0c;用m个字符串和他们匹配&#xff0c;分为错误匹配,重复匹配,正确匹配。 解题思路 裸的TrieTrie(字典树) code #include<cstdio> #include<cstring&g…

publiccms中将推荐页的内容显示在页面片段中

遍历的代码如下&#xff1a; <#list page.list><ul><#items as a><li><figure><!-- ${a.itemType!} : ${a.itemId!} ,place/redirect:count and 301 jump to a.url,place/click:count and 302 jump to a.url--><a href"${site.dyn…

ASP.NET Core 运行原理解剖[3]:Middleware-请求管道的构成

在 ASP.NET 中&#xff0c;我们知道&#xff0c;它有一个面向切面的请求管道&#xff0c;有19个主要的事件构成&#xff0c;能够让我们进行灵活的扩展。通常是在 web.config 中通过注册 HttpModule 来实现对请求管道事件监听&#xff0c;并通过 HttpHandler 进入到我们的应用程…

【ajax】readyState=4并且status=200时,还进error方法

转载自 【ajax】readyState4并且status200时&#xff0c;还进error方法 今天在使用jquery.ajax方法去调用后台方法时&#xff0c;ajax中得参数data类型是"JSON",后台DEBUG调试&#xff0c;运行正常&#xff0c;返回正常的结果集,但是前端一直都进到ajax的error方法…

publiccms实现首页菜单栏下拉的方法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 今天接到了个需求&#xff0c;使用publiccms实现首页导航栏下拉的效果&#xff0c;效果如下&#xff1a; 目前我的思路如下&#xff1a; 采用分类的方法实现将左侧的项作为二级分类右边…

P2922-[USACO08DEC]秘密消息Secret Message【Trie,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2922 题目大意 给n个01串&#xff0c;用m个01串匹配&#xff0c;如果n是m的前缀或者m是n的前缀那么就算匹配成功&#xff0c;求每个串有多少个匹配成功。 解题思路 我们可以用Trie树&#xff0c;分为…

2017(深圳) .NET技术分享交流会(第二期)网络直播活动

.NET Core 2.0 已于2017年8月14日正式发布&#xff0c;2017(深圳) .NET技术分享交流会在公众号中发出2个小时后就被抢光了&#xff0c;受限于场地无法增加人数&#xff0c;这次如鹏网杨中科老师提供VIP级的网络直播支持&#xff0c;为了保证网络直播效果&#xff0c;另外开启网…