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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
js如何验证密码强度
Mar 18 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
ThinkPHP控制器详解
2015/07/27 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
python if not in 多条件判断代码
2016/09/21 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python控制台实现交互式环境执行
2020/06/09 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
python调用摄像头的示例代码
2020/09/28 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
将相和教学反思
2014/02/04 职场文书
公司晚会主持词
2014/03/22 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
新店开张活动方案
2014/08/24 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
中学社团活动总结
2015/05/07 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
SQL Server内存机制浅探
2022/04/06 SQL Server
Tomcat配置访问日志和线程数
2022/05/06 Servers