vue门户实现全屏显示

实现全屏显示的方法

在Vue中实现全屏显示可以通过浏览器的Fullscreen API完成。以下是具体实现步骤：

安装screenfull依赖

screenfull是一个跨浏览器的全屏API封装库，可以简化操作：

npm install screenfull --save

基本全屏功能实现

在Vue组件中引入并使用screenfull：

import screenfull from 'screenfull'

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      } else {
        console.warn('Your browser does not support fullscreen')
      }
    }
  }
}

模板中使用

在模板中添加触发按钮：

<button @click="toggleFullscreen">切换全屏</button>

监听全屏状态变化

可以添加全屏状态变化的监听：

mounted() {
  if (screenfull.isEnabled) {
    screenfull.on('change', () => {
      console.log('全屏状态变化:', screenfull.isFullscreen)
    })
  }
},
beforeDestroy() {
  if (screenfull.isEnabled) {
    screenfull.off('change')
  }
}

针对特定元素全屏

默认全屏整个页面，如需指定元素：

toggleFullscreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle(this.$refs.fullscreenElement)
  }
}

模板中需要添加ref：

<div ref="fullscreenElement">
  <!-- 需要全屏的内容 -->
</div>

浏览器原生API实现

如果不使用screenfull，可用原生API：

toggleFullscreen() {
  const element = document.documentElement
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`)
    })
  } else {
    document.exitFullscreen()
  }
}

样式调整

全屏模式下可能需要特殊样式：

:fullscreen {
  background-color: white;
}
:-webkit-full-screen {
  background-color: white;
}
:-moz-full-screen {
  background-color: white;
}

注意事项

• 全屏API需要用户手势触发，不能自动执行
• 不同浏览器前缀可能不同，screenfull已处理兼容性问题
• 移动端支持程度有限，需测试目标平台