vue中实现全屏功能

安装全屏插件

npm install --save screenfull

全屏按钮绑架事件

<div class="full-screen" @click="fullScreen()">

data中绑定控制全屏开关

// 控制全屏
fullscreen: false,

添加方法：
这里全屏默认该页面所有元素全屏

// 点击全屏展示
fullScreen() {
     
  if (!screenfull.isEnabled) {
     
    this.$message({
     
      message: 'you browser can not work',
      type: 'warning'
    })
    return false
  }
  screenfull.toggle()
},

但是也可以实现让部分元素全屏，只需在screenfull.toggle()中写入需要全屏的元素即可
有时候不需要全屏显示导航栏就需要使用部分元素全屏

// 点击全屏展示
fullScreen() {
     
  const bodyEle = document.getElementById('data-screen')
  if (!screenfull.isEnabled) {
     
    this.$message({
     
      message: 'you browser can not work',
      type: 'warning'
    })
    return false
  }
  screenfull.toggle(bodyEle,pickerPanel)
},

这样就实现了两种显示方法的全屏功能！