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

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实现浏览器全屏展示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 富文本编辑器vue2-editor实现全屏功能

    vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考. 实现思路:自定义模块. 1. 定义全屏模块Fullscreen /** * 编辑器的全屏实现 */ import noScroll from 'no-scroll' export default class Fullscreen { constructor (quill, options = {}) { this.quill = quill this.options = options this.fullscree

  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even

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

    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() } 试了一

  • vue点击按钮实现让页面的某一个元素全屏展示

    目录 点击按钮让页面的某一个元素全屏展示 先上效果图 页面结构 在页面加载时添加监听 vue全屏和退出全屏调用事件 页面全屏 部分元素全屏 退出全屏调用事件 点击按钮让页面的某一个元素全屏展示 先上效果图 项目情况:vue+screenfull插件 其实文档上写的很清楚:screenfull文档 点击页面的全屏图标,使包裹地图的div实现全屏. 页面结构 在页面加载时添加监听 mounted () { const element = document.getElementById('map_co

  • Vue实现浏览器端扫码功能

    Vue实现浏览器端扫码功能

    背景 不久前我做了关于获取浏览器摄像头并扫码识别的功能,本文中梳理了涉及到知识点及具体代码实现,整理成此篇文章内容. 本文主要介绍,通过使用基于 vue 技术栈的前端开发技术,在浏览器端调起摄像头

  • 原生javascript实现的全屏滚动功能示例

    本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num

  • Android开发实现浏览器全屏显示功能

    本文实例讲述了Android开发实现浏览器全屏显示功能.分享给大家供大家参考,具体如下: 业务需求:浏览器设置中支持全屏显示的功能. 分析:只需要在设置界面上增加是否全屏的checkBox , 然后 BrowserActivity 中读取这个值, 来设置窗口的 Style. 修改: 1.  修改项目下的 res/xml 文件夹下的 browser_preferences.xml 文件, 添加 <CheckBoxPreference android:key="full_screen"

  • js实现各浏览器全屏代码实例

    现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: //直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="fullScreen()">现代浏览器全屏

  • 基于vue+ bootstrap实现图片上传图片展示功能

    基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

  • 用html5 js实现点击一个按钮达到浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen()

  • js控制页面的全屏展示和退出全屏显示的方法

    本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

  • JavaScript控制浏览器全屏显示简单示例

    JavaScript控制浏览器全屏显示简单示例

    本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

随机推荐