vue实现浏览器全屏展示功能


Posted in Javascript onNovember 27, 2019

1、项目中使用的是sreenfull插件,执行命令安装

npm install --save screenfull

2、安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下:

toggleFullscreen() {
  if (!screenfull.enabled) {
   this.$message({
    message: 'you browser can not work',
    type: 'warning'
   })
   return false
  }
  screenfull.toggle()
}

试了一下可以全屏,我用的chrome,IE9以下不要考虑

3、第一步完成之后就是怎么监听到全屏的变化,因为如果是通过Esc键退出全屏,此时是没办法监听到的。经过一番查找,解决办法如下:

<script>
import screenfull from 'screenfull'
export default {
 data () {
   return {
    isFullscreen: false
   }
  },
 methods: {
  /**
   * 全屏事件
   */
  screenfull() {
   if (!screenfull.enabled) {
    this.$message({
     message: 'Your browser does not work',
     type: 'warning'
    })
    return false
   }
   screenfull.toggle()
   this.isFullscreen = true
  },
  /**
   * 是否全屏并按键ESC键的方法
   */
  checkFull() {
   var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
   // to fix : false || undefined == undefined
   if (isFull === undefined) {
     isFull = false
   }
   return isFull
  }
 },
 mounted() {
   window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
       // 全屏下按键esc后要执行的动作
       this.isFullscreen = false
      }
     }
    }
}
</script>

总结

以上所述是小编给大家介绍的vue实现浏览器全屏展示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
js中apply和call的理解与使用方法
Nov 27 #Javascript
vue-cli在 history模式下的配置详解
Nov 26 #Javascript
js实现淘宝首页的banner栏效果
Nov 26 #Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 #Javascript
vue实现pdf文档在线预览功能
Nov 26 #Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
使用Vue生成动态表单
Nov 26 #Javascript
You might like
关于页面优化和伪静态
2009/10/11 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python3生成随机数实例
2014/10/20 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python实现树形打印目录结构
2018/03/29 Python
浅析Python四种数据类型
2018/09/26 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
标准化管理实施方案
2014/02/25 职场文书
丧事主持词大全
2014/04/02 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
师范生见习报告
2014/10/31 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年教务主任工作总结
2015/07/22 职场文书