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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
js实现日历的简单算法
Jan 24 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
django 控制页面跳转的例子
2019/08/06 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python中spy++的使用超详细教程
2021/01/29 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
采购文员岗位职责
2013/11/20 职场文书
行政助理工作职责范本
2014/03/04 职场文书
英语教师岗位职责
2014/03/16 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS