vue中实现点击变成全屏的多种方法


Posted in Javascript onSeptember 27, 2020

项目中有点击按钮实现全屏功能

方式一:js实现全屏

<template>
 <div>
   <a-button type="primary" @click="screen">全屏</a-button>
 </div>
</template>

data:

data() {
  return {
   fullscreen: false
  };
 },

methods:

screen() {
   let element = document.documentElement;
   if (this.fullscreen) {
    if (document.exitFullscreen) {
     document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
     document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
     document.msExitFullscreen();
    }
   } else {
    if (element.requestFullscreen) {
     element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
     element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
     element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
     // IE11
     element.msRequestFullscreen();
    }
   }
   this.fullscreen = !this.fullscreen;
  },

方式二:使用的是sreenfull插件,执行命令安装

npm install --save screenfull

在使用的页面正确引入:

import screenfull from ‘screenfull'

代码如下:

<template>
   <div>
     <a-button type="primary" @click="screen">全屏</a-button>
   <div>
</template>

data:

data() {
  return {
   fullscreen: false
  };
 },

methods:

screen() {
   // 如果不允许进入全屏,发出不允许提示
   if (!screenfull.enabled) {
    this.$message("您的浏览器不能全屏");
    return false;
   }
   screenfull.toggle();
   this.$message.success("全屏啦");
  },

效果图:

vue中实现点击变成全屏的多种方法

实用

到此这篇关于vue中实现点击变成全屏的多种方法的文章就介绍到这了,更多相关vue点击全屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery validate poshytip 自定义样式
Nov 26 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
jQuery实现大图轮播
Feb 13 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
JS运算符简单用法示例
Jan 19 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 #Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 #Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 #Javascript
react-intl实现React国际化多语言的方法
Sep 27 #Javascript
Javascript异步流程控制之串行执行详解
Sep 27 #Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 #Javascript
Openlayers实现测量功能
Sep 25 #Javascript
You might like
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php中curl使用指南
2015/02/05 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python编程之event对象的用法实例分析
2017/03/23 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Pytorch转tflite方式
2020/05/25 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
法学毕业生自我鉴定
2014/01/31 职场文书
火车来了教学反思
2014/02/11 职场文书
关于元旦的广播稿
2014/02/16 职场文书
公司聘任书模板
2014/03/29 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
贷款担保书范本
2015/09/22 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python