当前位置：首页 > VUE

vue实现点击全屏

2026-02-19 11:12:13VUE

实现全屏功能的方法

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

<template>
  <button @click="toggleFullscreen">全屏</button>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
          console.error(`全屏错误: ${err.message}`);
        });
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    }
  }
}
</script>

使用第三方库

如果需要更简单的实现或更好的浏览器兼容性，可以考虑使用vue-fullscreen这样的第三方库：

npm install vue-fullscreen

import VueFullscreen from 'vue-fullscreen'
Vue.use(VueFullscreen)

<template>
  <button @click="toggle">全屏</button>
</template>

<script>
export default {
  methods: {
    toggle() {
      this.$fullscreen.toggle(this.$el.querySelector('button'), {
        wrap: false,
        callback: null
      })
    }
  }
}
</script>

样式调整

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

:fullscreen {
  background-color: white;
}

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

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

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

浏览器兼容性处理

不同浏览器可能需要不同的前缀和方法调用：

function toggleFullScreen() {
  const doc = window.document;
  const docEl = doc.documentElement;

  const requestFullScreen = docEl.requestFullscreen || 
                           docEl.mozRequestFullScreen || 
                           docEl.webkitRequestFullScreen || 
                           docEl.msRequestFullscreen;

  const exitFullScreen = doc.exitFullscreen || 
                        doc.mozCancelFullScreen || 
                        doc.webkitExitFullscreen || 
                        doc.msExitFullscreen;

  if(!doc.fullscreenElement && 
     !doc.mozFullScreenElement && 
     !doc.webkitFullscreenElement && 
     !doc.msFullscreenElement) {
    requestFullScreen.call(docEl);
  } else {
    exitFullScreen.call(doc);
  }
}