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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
jQuery操作之效果详解
May 19 jQuery
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
js实现点赞效果
Mar 16 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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仿盗链代码
2012/06/03 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python实现画一颗树和一片森林
2018/06/25 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
财务学生的职业生涯发展
2014/02/11 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
个人合伙协议书范本
2014/10/14 职场文书
留学推荐信中文范文
2015/03/26 职场文书
员工福利申请报告
2015/05/15 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
浅谈MySQL函数
2021/10/05 MySQL