vue2 使用vueUse库实现全屏功能

目录

前言

一、VueUse

二、使用步骤

1.安装

2.引入

3.初始化

总结

---

前言

实现整个页面全屏展示以及指定DOM元素的全屏展示，这里用的VueUse工具库中的useFullscreen方法。

中文文档 起步 | VueUse中文文档

参考文章 Vue工具库VueUse的具体用法

参考文章 VueUse常用函数介绍

---

一、VueUse

VueUse是一款基于组合式API的函数集合，适用于Vue 3和Vue2.7版本之后。它为常见的开发人员用例提供了数十种解决方案，例如，跟踪引用更改、检测元素可见性、简化常见的 Vue 模式、键盘/鼠标输入等。这是真正节省开发时间的好方法，因为你不必自己添加所有这些标准功能。 

二、使用步骤

1.安装

npm i @vueuse/core

2.引入

import { useFullscreen } from "@vueuse/core";

3.初始化

在mounted()内调用init()方法初始化，解构得到对应的方法。

    init(){
      const { toggle:fullWindowScreenAction } = useFullscreen();
      window.fullWindowScreenAction = fullWindowScreenAction
      const domScreen = document.getElementById('domScreen')
      const { toggle: fullscreenAction } = useFullscreen(domScreen)
      window.fullscreenAction = fullscreenAction
    },

• 整个页面全屏展示

解构得到 fullWindowScreenAction方法，点击按钮，实现页面全屏与非全屏的切换。

 全屏

• DOM元素全屏

      <div class="fullscreen-dom-content" id="domScreen" @click="fullscreenHandler('dom')" ref="domRef">
        <div class="title">DOM元素切换全屏</div>
        <div class="content-inner">
          <el-button
            class="fullscreen-btn"
            type="primary"
          >
            {
   
   { isDomFullscreen ? '退出全屏' : '点击全屏'}}
          </el-button>
        </div>
      </div>

传入DOM元素id【domScreen】，解构得到  fullscreenAction方法，点击按钮，实现DOM元素的全屏与非全屏的切换。

---

全屏

 

总结

本文主要使用到useFullscreen方法，实现页面、DOM元素全屏功能，还有很多功能待探索，今后使用到相应功能再做记录。