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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
javascript事件问题
Sep 05 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
js实现常用排序算法
Aug 09 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
详解用node编写自己的cli工具
May 23 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
js图片无缝滚动插件使用详解
May 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
一个PHP+MSSQL分页的例子
2006/10/09 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JS远程获取网页源代码实例
2013/09/05 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
通过python检测字符串的字母
2020/02/18 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
shell变量的作用空间是什么
2013/08/17 面试题
集团薪酬管理制度
2014/01/13 职场文书
会计专业求职信范文
2014/03/16 职场文书
高考寄语大全
2014/04/08 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
统计学教授推荐信
2014/09/18 职场文书
2014年团队工作总结
2014/11/24 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
MySQL限制查询和数据排序介绍
2022/03/25 MySQL