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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
JS实现九宫格拼图游戏
Jun 28 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入门教程 精简版
2009/12/13 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python异常学习笔记
2015/02/03 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
星球大战与Python之间的那些事
2016/01/07 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python应用文件读取与登录注册功能
2019/09/23 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
总经理秘书的岗位职责
2013/12/27 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
健康状况证明书
2014/11/26 职场文书
实习计划书范文
2015/01/16 职场文书
婚庆司仪开场白
2015/05/29 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers