Vue3实现页面内容区域全屏展示

Vu3 + vueuse 实现局部内容区域全屏展示

安装vueuse

npm i @vueuse/core

引入useFullscreen方法

import { useFullscreen } from '@vueuse/core'

实现全屏切换

<template> 
    <!-- 添加ref引用需要全屏的容器 --> 
    <div class="app-main" ref="screenRef"> 
        <div class="screen-full" @click="toggle">  <!-- 全屏按钮 --> 
            <i :class="isFullscreen ? 'icon-exit-fullscreen' : 'icon-fullscreen'"></i> 
        </div> 
        <div>页面主要内容...</div>
    </div> 
</template> 
<script lang="ts" setup> 
import { useFullscreen } from '@vueuse/core' 
const screenRef = ref(null) // 获取要全屏的DOM元素引用 
const { isFullscreen, toggle } = useFullscreen(screenRef) // 传入目标元素的ref 
</script> 

实现效果

非全屏状态

全屏状态