vue页面实现全屏功能

实现全屏功能的方法

在Vue中实现全屏功能可以通过浏览器提供的Fullscreen API完成。以下是几种常见的实现方式：

使用原生Fullscreen API

// 进入全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

// 检查全屏状态
function isFullscreen() {
  return document.fullscreenElement || 
         document.webkitFullscreenElement || 
         document.msFullscreenElement;
}

使用Vue自定义指令

// 注册全局指令
Vue.directive('fullscreen', {
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      if (binding.value) {
        enterFullscreen(el);
      } else {
        exitFullscreen();
      }
    });
  }
});

// 组件中使用
<button v-fullscreen="isFullscreen">切换全屏</button>

使用第三方库

安装screenfull库：

npm install screenfull

在Vue组件中使用：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.fullscreenElement);
      }
    }
  }
}

响应式全屏状态

可以通过事件监听实现全屏状态响应：

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  document.addEventListener('msfullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    this.isFullscreen = !!document.fullscreenElement;
  }
}

样式调整

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

:fullscreen {
  background-color: white;
}

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

:-ms-fullscreen {
  background-color: white;
}

注意事项：

• 全屏API需要在用户交互事件中触发（如click）
• 不同浏览器需要前缀兼容
• iOS Safari对全屏支持有限