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 相关文章推荐
javascript 打印内容方法小结
Nov 04 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js日期联动示例
May 02 Javascript
javascript版2048小游戏
Mar 18 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
微信JSSDK上传图片
Aug 23 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 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批量生成缩略图的代码
2008/07/19 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python实现备份目录的方法
2015/08/03 Python
使用Python绘制图表大全总结
2017/02/11 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python程序变成软件的实操方法
2019/06/24 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
护士个人简历自荐信
2013/10/18 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
大学毕业感言一句话
2014/02/06 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Python之基础函数案例详解
2021/08/30 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Java的Object类的九种方法
2022/04/13 Java/Android