vue-cli点击实现全屏功能

全屏功能是指浏览器窗口占据整个屏幕，去除了浏览器的工具栏和地址栏，使得浏览器窗口成为 的用户界面。在实际应用中，全屏功能可以提高用户体验，让用户更加专注于页面的内容。

在Vue.js应用中，我们可以通过调用浏览器提供的API来实现全屏功能。下面是实现全屏功能的步骤：

1. 创建一个全屏按钮

在Vue.js应用中，我们可以使用组件来创建一个全屏按钮。首先，在组件的template中添加一个按钮元素：

<template>
  <div>
    <button class="fullscreen-btn">全屏</button>
  </div>
</template>

然后，在组件的style中添加样式：

<style>
.fullscreen-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

这样就创建了一个全屏按钮，其位置在屏幕的右下角。

2. 监听按钮的点击事件

接下来，我们需要监听按钮的点击事件，在按钮被点击时触发全屏功能。在Vue.js中，我们可以使用指令v-on来监听事件。在按钮元素中添加v-on指令：

<button class="fullscreen-btn" v-on:click="toggleFullscreen">全屏</button>

然后在组件的methods中添加toggleFullscreen方法：

methods: {
  toggleFullscreen() {
    const element = document.documentElement;
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      element.requestFullscreen();
    }
  }
}

toggleFullscreen方法中，我们首先获取到document.documentElement，也就是整个HTML文档，然后判断当前是否已经进入全屏模式：

- 如果已经进入全屏模式，调用document.exitFullscreen()方法退出全屏模式；

- 如果还没有进入全屏模式，调用element.requestFullscreen()方法进入全屏模式。

3. 测试全屏功能

现在我们已经完成了全屏按钮的创建和事件的监听，接下来，我们需要测试全屏功能，查看是否正常工作。在浏览器中打开Vue.js应用，在运行时点击全屏按钮，可以看到整个浏览器的窗口都变成了我们的应用，去除了浏览器的工具栏和地址栏，这就表明全屏功能已经成功实现了。

4. 总结

本文介绍了在Vue.js应用中如何实现全屏功能，首先我们创建了一个全屏按钮，并添加了样式。然后监听按钮的点击事件，在事件被触发时，使用浏览器提供的API来进入或退出全屏模式。通过简单的几步，我们就成功地实现了全屏功能，提高了Vue.js应用的用户体验。