您现在的位置是:首页 > 正文

vue 全屏按钮切换

2023-11-10 00:03:51阅读 3869

在这里插入图片描述

<!-- 全屏按钮 -->
    <!-- <img class="box" v-if="!showFullScreen" src="../assets/img/full.png" @click="showFullScreenFun" style="position: absolute;top: 0.4rem;right: 0.9rem;"/> -->
    <img class="box" v-if="!showFullScreen" src="../assets/img/full.png" @click="showFullScreenFun" style="position: fixed;top: 0.05rem;right: 0.1rem;"/>
    <img class="box" v-else src="../assets/img/empty.png" @click="showFullScreenFun" style="position: fixed;top: 0.05rem;right: 0.1rem;"/>
mounted(){
	// -------------------
    shopBus.$on('timeout', msg => {
        this.timeout = msg
      })
    //   console.log(this.$route.query)
      console.log(this.timeout)
      let vm = this
      window.addEventListener('keydown', function (e) {
        e = e || window.event
        if (e.key == "F11") {
          e.preventDefault()
          vm.showFullScreenFun()
        }
    })
    // --------------------
}
methods:{
	//   全屏
    showFullScreenFun() {
        this.showFullScreen = !this.showFullScreen;
        var dom = document.getElementById('bigbox')
        this.toggleFullScreen(dom)
    },
    toggleFullScreen(e) {
        this.FullScreen(e);
    },
    FullScreen(el) {
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (!isFullscreen) { //进入全屏,多重短路表达式
          (el.requestFullscreen && el.requestFullscreen()) ||
          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el
            .msRequestFullscreen());

        } else { //退出全屏,三目运算符
          document.exitFullscreen ? document.exitFullscreen() :
            document.mozCancelFullScreen ? document.mozCancelFullScreen() :
            document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
        }
    },
    // --------------------------------
}

网站文章

  • c语言内联函数测试,关于C语言内联函数

    今天对内联函数做了一个简单的测试,但是编译器貌似并没有对内联函数进行展开。测试如下:inline.cinlineinttest(inti){returni+1;}intmain(){intj=1;j=test(j);return0;}gcc-Sinline.c-oinline.s查看inline.s部分内容如下:main:.LFB1:.cfi_startprocpushl...

    2023-11-10 00:03:19
  • Redis学习笔记

    一、安装Redis1.1 下载压缩包先在VM虚拟机里安装Centos7,并且SecureCRT连接上Centos1.从百度网盘下载redis-6.2.1.tar.gz到桌面2.通过SecureFX工具...

    2023-11-10 00:03:10
  • 删除二叉树节点(递归实现)

    删除二叉树节点(递归实现)

    2023-11-10 00:02:55
  • AABO:自适应最优化Anchor设置,性能榨取的最后一步 | ECCV 2020

    AABO:自适应最优化Anchor设置,性能榨取的最后一步 | ECCV 2020

    编译 |VincentLee来源|晓飞的算法工程笔记Introduction目前,主流的目标检测算法使用多种形状的anchor box作为初始预测,然后对anchor box进行回...

    2023-11-10 00:02:47
  • sql语句 某字段替换字符串

    sql语句 某字段替换字符串

    sql语句 某字段替换字符串

    2023-11-10 00:02:42
  • LeetCode.515 Find Largest Value in Each Tree Row

    题目:You need to find the largest value in each row of a binary tree.Example:Input: 1 / \ 3 2 / \ \ 5 3 9 Output: [1, 3, 9]分析:/** *

    2023-11-10 00:02:29
  • spring框架加载流程梳理

    spring ioc文章目录spring ioc前言一、学习spring的目标?二、spring 整体脉络1.注册beanfactory的后置处理器到beanDefinitionMap2.读入数据总结...

    2023-11-10 00:02:21
  • Linux安装H2数据库,并作为后台服务运行

    Linux安装H2数据库1.解压到linux服务器上2.进入到h2/bin/目录下,执行命令作为后台服务运行(注意:加&即可)java -cp h2-1.4.190.jar  org.h2.tools.Server &3.远程访问方式:http://IP:8082

    2023-11-10 00:02:10
  • 微信小程序——解决异步问题 最新发布

    这些是解决小程序异步请求的一些常见方法。具体的解决方案取决于你的项目需求和个人偏好。无论哪种方法,都需要注意处理成功和失败的情况,以确保你的小程序在网络请求方面具有良好的稳定性和用户体验。在小程序中,异步请求通常是通过使用微信小程序提供的API来实现的,最常见的是使用wx.request()函数来发送异步网络请求。

    2023-11-10 00:01:53
  • 前端常见面试题:href和src的区别

    href和src的区别: href是指向网络资源所在位置,建立当前元素或者当前文档之间的链接,用于超链接。 例如:a标签 link标签 src:是指向外部资源位置,指向的内容会嵌套到当前文档标签所在的位置。 例如:img标签 frame标签 主要区别: href是网络资源,src是外部资源。 href是超链接,src资源会嵌套到当前标签。 ...

    2023-11-10 00:01:39