`vue-fullscreen` 插件在vue项目中实现F11同样效果的全屏功能

1. vue-fullscreen 介绍

vue-fullscreen 是一个 Vue.js 插件，用于在网页中启用全屏模式。可以在 Vue.js 应用程序中轻松地实现f11的效果。[官方文档地址]

2. 下载和使用

• 安装

  • npm 安装 npm install vue-fullscreen --save
  • yarn 安装 yarn add vue-fullscreen

• 引入

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

• 在 Vue 实例或组件中使用

  <template>
    <div>
      <div class="title" v-on:dblclick="toggleFullScreen">数据驾驶舱</div>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      toggleFullScreen() {
         // 检查当前是否处于全屏模式
        if (this.$fullscreen.isFullscreen) {
          this.$fullscreen.exit()
        } else {
          this.$fullscreen.request()
        }
         // 或者直接调用 toggle() 方法
         // toggle()方法会自动检测当前是否处于全屏状态，如果是，则退出全屏，如果不是，则进入全屏
         // this.$fullscreen.toggle();
      }
    }
  }
  </script>
  

3. 常用内置API

this.$fullscreen 是 Vue-Fullscreen 插件提供的全屏 API 对象，包含以下方法：

• request: 请求全屏，返回一个 promise。
• exit: 退出全屏，返回一个 promise。
• toggle: 切换全屏状态，返回一个 promise。
• isEnabled: 检查是否支持全屏模式，返回一个布尔值。
• isActive: 检查当前是否处于全屏模式，返回一个布尔值。
• on: 监听全屏事件，接收两个参数：事件名称和事件回调函数。
• off: 移除全屏事件监听，接收两个参数：事件名称和事件回调函数。
• emit: 触发全屏事件，接收两个参数：事件名称和事件参数。