当前位置：首页 > VUE

vue实现全屏显示

2026-03-09 14:08:11VUE

Vue 实现全屏显示的方法

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

使用原生 Fullscreen API

浏览器提供了 requestFullscreen 方法来实现全屏功能。可以在 Vue 组件中直接调用：

// 进入全屏
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();
  }
}

使用 Vue 自定义指令

可以创建一个 Vue 指令来简化全屏操作：

Vue.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      if (binding.value) {
        enterFullscreen(el);
      } else {
        exitFullscreen();
      }
    });
  }
});

在模板中使用：

<button v-fullscreen="true">进入全屏</button>
<button v-fullscreen="false">退出全屏</button>

使用第三方库

可以使用 screenfull 库来简化全屏操作：

安装：

npm install screenfull

在 Vue 组件中使用：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    }
  }
}

监听全屏状态变化

可以通过事件监听全屏状态的变化：

vue实现全屏显示

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