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的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Vue通过provide inject实现组件通信
Sep 03 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实现短域名互转
2013/07/05 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python字典简介以及用法详解
2016/11/15 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
TensorFlow的权值更新方法
2018/06/14 Python
python随机生成库faker库api实例详解
2019/11/28 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
自动化专业职业生涯规划书范文
2014/01/16 职场文书
英语商务邀请函范文
2014/01/16 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2014年工程部工作总结
2014/11/25 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
小学同学聚会感言
2015/07/30 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android