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.$fullscreenVue-Fullscreen 插件提供的全屏 API 对象,包含以下方法:

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

前往低代码交流专区

更多推荐