当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现浏览器全屏展示功能

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

site:36.ci,autotestballoon,快递12万宋瓷遭损坏

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实现浏览器全屏展示功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网