vue-fullscreen实现全屏功能 点击上传文件会取消全屏

Vue-FullScreen是一个轻量级的Vue.js组件，用于实现页面的全屏显示功能。要在项目中使用它，并结合文件上传功能，你可以按照以下步骤操作：

1. 首先，在`main.js`或你项目的入口文件中引入Vue-FullScreen库，通常通过npm安装：

   npm install vue-full-screen

2. 在Vue组件模板中添加`fullscreen`指令来开启全屏模式：

   <button @click="enterFullScreen">点击进入全屏</button>
   <button @click="exitFullScreen" v-if="$fullscreen.isFullscreen">点击退出全屏</button>
   <div :fullscreen="isFullscreen" class="your-file-upload-container">
     <!-- 你的上传区域 -->
   </div>

   <script>
   import FullScreen from 'vue-full-screen';

   export default {
     components: { FullScreen },
     data() {
       return {
         isFullscreen: false,
       };
     },
     methods: {
       enterFullScreen() {
         this.$fullscreen.toggle();
       },
       exitFullScreen() {
         this.$fullscreen.exit();
       },
     },
   };
   </script>

当用户点击“上传文件”按钮时，你可以直接调用`exitFullScreen()`方法来取消当前的全屏状态。这样，如果用户正在进行文件上传操作，他们需要先完成上传再回到全屏。