vue.js怎么实现全屏显示功能

1、安装vue-fullscreen

npm install vue-fullscreen

2、在mian.js中引用并注册

import fullscreen from 'vue-fullscreen'

Vue.use(fullscreen)

3、点击按钮上绑定fullscreen方法

data中定义：fullscreenFlag：false

fullscreen() {

    // 需要全屏显示的dom元素

    let dom = document.getElementById('指定全屏的dom元素')

        // 调用全屏方法     

        this.$fullscreen.enter(dom, { 

            wrap: false,

            callback: f => {

                    this.fullscreenFlag = f      

            }    

        })   

 }

全屏时弹框无法打开，点击全屏按钮时可以使用下面的方法：data中定义：fullscreenFlag：false

    fullscreen(){

      let element = document.body //全屏的dom元素 如果不设置是body很多元素显示不出来

      let titleBar = document.getElementsByClassName('titleBar')[0] //整体头部元素 【刷新、最小化、最大化 关闭】

      // 判断是否已经是全屏

      // 如果是全屏，退出

      if (this.fullscreenFlag) {

        titleBar.style.display = "block" //控制某些元素，非全屏状态下显示或修改样式

        if (document.exitFullscreen) {

          document.exitFullscreen();

        } else if (document.webkitCancelFullScreen) {

          document.webkitCancelFullScreen();

        } else if (document.mozCancelFullScreen) {

          document.mozCancelFullScreen();

        } else if (document.msExitFullscreen) {

          document.msExitFullscreen();

        }

        console.log('已还原！');

      } else {    // 否则，进入全屏

        titleBar.style.display="none" //   控制某些元素，全屏状态下隐藏或修改样式

        if (element.requestFullscreen) {

          element.requestFullscreen();

        } else if (element.webkitRequestFullScreen) {

          element.webkitRequestFullScreen();

        } else if (element.mozRequestFullScreen) {

          element.mozRequestFullScreen();

        } else if (element.msRequestFullscreen) {

          // IE11

          element.msRequestFullscreen();

        }

        console.log('已全屏！');

      }

      // 改变当前全屏状态

      this.fullscreenFlag = !this.fullscreenFlag;

    },