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

举报
穆雄雄 发表于 2022/12/07 22:03:22 2022/12/07
【摘要】 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂最近总有人给我说ta有社恐,明明是有社牛好不好…… 前言在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏的功能,全屏指的是浏览器地址栏什么的都需要去掉……相当于和按f11一样的效果,于是就开始写~ 代码实现首先安装个依赖,代码如下:npm install --save screenfull在需要全屏的页面引入,代码如下:impo...

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:给子组件里面传递的,看看是不是宽度要加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(() => {
      });
    },

全屏的图标:601b47f2c09dd41a20f2ff1e4b4cb4c3.png​编辑

退出全屏的图标:

4a406a568a2b5212219a4b330c2cbe7e.png​编辑

image-20211201180748713

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。