当前位置：首页 > VUE

vue实现全屏显示

2026-03-30 01:55:24VUE

Vue 实现全屏显示的方法

在 Vue 项目中，可以通过浏览器提供的全屏 API 结合 Vue 的生命周期或自定义指令实现全屏功能。以下是几种常见的实现方式：

使用原生 Fullscreen API

浏览器原生提供了 requestFullscreen 方法，可以通过调用 DOM 元素的该方法实现全屏：

// 在 Vue 方法中调用
toggleFullscreen() {
  const element = document.documentElement; // 全屏整个页面
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
}

封装为 Vue 自定义指令

将全屏逻辑封装为 Vue 指令，方便复用：

// 注册全局指令
Vue.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        el.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    });
  }
});

// 在模板中使用
<button v-fullscreen>切换全屏</button>

使用第三方库

如果项目需要更复杂的全屏控制（如跨浏览器兼容性），可以使用第三方库如 screenfull：

npm install screenfull

在 Vue 组件中使用：

import screenfull from 'screenfull';

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

响应式全屏状态

通过 Vue 的响应式特性监听全屏状态变化：

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

样式适配

全屏模式下可能需要调整样式，可以通过 CSS 伪类 :fullscreen 实现：

vue实现全屏显示

:fullscreen {
  background-color: #fff;
}

:-webkit-full-screen {
  background-color: #fff;
}

:-moz-full-screen {
  background-color: #fff;
}

:-ms-fullscreen {
  background-color: #fff;
}