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 操作select标签实现代码
May 14 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python pygame实现2048游戏
2018/11/20 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
人民调解员先进事迹材料
2014/05/08 职场文书
班主任先进事迹材料
2014/12/17 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
导游词开场白
2015/01/31 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers