Vue 实现全屏按钮：详细步骤与代码示例

在 Vue 中实现全屏按钮可以通过以下步骤：

在 Vue 组件中添加一个按钮元素，用于触发全屏功能。例如：

<template>
  <div>
    <button @click='toggleFullScreen'>全屏</button>
    <!-- 其他组件内容 -->
  </div>
</template>

在 Vue 组件的methods中定义toggleFullScreen方法，用于切换全屏状态。使用document.documentElement来获取整个页面的根元素。

methods: {
  toggleFullScreen() {
    if (document.fullscreenElement) {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      // 进入全屏
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      }
    }
  }
}

在toggleFullScreen方法中，通过判断document.fullscreenElement是否存在来确定当前是否为全屏状态。如果存在，则调用相应的退出全屏方法；如果不存在，则调用相应的进入全屏方法。
在按钮的点击事件中调用toggleFullScreen方法。

这样，当点击全屏按钮时，就可以实现全屏切换功能。