vue中如何实现全全全屏和退出全屏?
【摘要】 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂最近总有人给我说ta有社恐,明明是有社牛好不好…… 前言在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏的功能,全屏指的是浏览器地址栏什么的都需要去掉……相当于和按f11一样的效果,于是就开始写~ 代码实现首先安装个依赖,代码如下:npm install --save screenfull在需要全屏的页面引入,代码如下:impo...
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂
最近总有人给我说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:给子组件里面传递的,看看是不是宽度要加200
this.$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(() => {
});
},
全屏的图标:编辑
退出全屏的图标:
编辑
image-20211201180748713
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)