Vue - 点击按钮使浏览器进入全屏解决方案

短命女 2023-01-20 03:56 11阅读 0赞

## 前言 ##

每个浏览器都有全屏功能，使用 `JS` 也可以完成这个事件，可实现如下功能：

*  全屏时，退出全屏。
 *  非全屏时，进入全屏。

## 实现代码 ##

需要定义一个外部变量标识 `isFullScreen` ，然后在按钮上绑定 `fullScreen` 函数即可。

data(){ 
    	return { 
    		isFullScreen: false,
    	}
    }
    
    /* * 浏览器全屏方法 * 使用方法: 绑定点击事件即可 * @return void */
     fullScreen: function () { 
      if (this.isFullScreen == false) { 
        var ele = document.documentElement,
          reqFullScreen =
            ele.requestFullScreen ||
            ele.webkitRequestFullScreen ||
            ele.mozRequestFullScreen ||
            ele.msRequestFullscreen;
        if (typeof reqFullScreen !== "undefined" && reqFullScreen) { 
          reqFullScreen.call(ele);
        }
        this.isFullScreen = true;
      } else { 
        var ele = document.documentElement;
        if (document.exitFullscreen) { 
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { 
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) { 
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) { 
          document.msExitFullscreen();
        }
        this.isFullScreen = false;
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关解决Vue按钮多次点击重复提交数据问题

解决Vue按钮多次点击重复提交数据问题这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下。 ...

短命女/ 2024年04月17日 14:16/ 0 赞/ 72 阅读

相关 js点击成全屏，再点击或者ESC退出全屏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0

雨点打透心脏的1/2处/ 2023年06月28日 08:42/ 0 赞/ 21 阅读

相关 Vue - 点击按钮使浏览器进入全屏解决方案

前言每个浏览器都有全屏功能，使用 `JS` 也可以完成这个事件，可实现如下功能：全屏时，退出全屏。非全屏时，进入全屏。实现代码需要定义一个

短命女/ 2023年01月20日 03:56/ 0 赞/ 12 阅读

相关按钮—按钮点击特效

按钮—按钮点击特效 ![在这里插入图片描述][2021041819283044.gif_pic_center] <!DOCTYPE html> <htm

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:54/ 0 赞/ 301 阅读

相关 vue 点击按钮复制对应内容

示例代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars

不念不忘少年蓝@/ 2023年01月11日 09:07/ 0 赞/ 265 阅读

相关 js实现点击按钮使图片排序

效果 1 、点击按钮如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大如果按钮文

梦里梦外;/ 2022年09月11日 15:27/ 0 赞/ 320 阅读

相关 Android全屏解决方案

未root的系统，必须通过pc端运行adb命令进行设置，因此请开启开发者选项中的adb调试模式，用usb连接电脑和手机，运行下面的代码强制开启全屏模式，立即生效：全屏沉浸

谁借莪１个温暖的怀抱￠/ 2022年05月15日 15:23/ 0 赞/ 271 阅读

相关 js点击按钮实现全屏效果

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

旧城等待，/ 2022年01月19日 03:34/ 0 赞/ 709 阅读

相关解决点击按钮使屏幕横屏，iPad无效

我们的APP是支持屏幕旋转的，当然，支持屏幕旋转，只需要如下勾选就可以了： ![2019062016290379.png][] 所以，当用户锁定屏幕方向的时候，我们的APP

怼烎@/ 2022年01月11日 23:17/ 0 赞/ 296 阅读

相关 JavaScript点击进入全屏和退出全屏

目录效果图核心代码完整案例效果图 ![点击进入全屏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

向右看齐/ 2021年09月22日 01:01/ 0 赞/ 527 阅读