目录
前言
实现整个页面全屏展示以及指定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元素全屏功能,还有很多功能待探索,今后使用到相应功能再做记录。