开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂
最近总有人给我说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
