vue3进入全屏状态

最新推荐文章于 2024-09-11 11:31:37 发布

相见一月

最新推荐文章于 2024-09-11 11:31:37 发布

阅读量1.8k

点赞数 2

文章标签： java javascript 前端

本文链接：https://blog.csdn.net/weixin_59916662/article/details/127324179

版权

不用引入插件

可以使用键盘中的Esc，退出全屏并不报错

1、html样式

<template>
    <div  class="box">
        <el-button type="primary" @click="screen()">
            {{ flag == false ? "全屏" : "不全屏" }}
        </el-button>
    </div>
</template>

2、vue中的js

<script setup lang='ts'>
import { Ref, ref } from 'vue';

let flag: Ref<boolean | null> = ref(false)

const screen=()=> {

    let element = document.documentElement;
    // 不全屏是null,返回false,
    flag.value = document.fullscreenElement === null ? false :true
    // false是进入全屏状态
    if (flag.value) {
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    } else {
        // 全屏
        if (element.requestFullscreen) {
            element.requestFullscreen();
        }
    }
    // 切换文本状态（只是用在文本上，文本不是动态可以忽略）
    flag.value = !flag.value
}

</script>