后台项目点击按钮全屏切换

小夏同学呀

已于 2023-12-22 23:56:45 修改

阅读量426

点赞数 10

分类专栏： Vue 文章标签：前端 javascript html

于 2023-12-21 16:25:59 首次发布

本文链接：https://blog.csdn.net/web5219/article/details/135134073

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

后台项目点击按钮全屏切换

1.首先给按钮帮上点击事件，代码如下

   <el-button size="small" icon="FullScreen" circle @click="fullScreen"></el-button>

2.在点击事件的回调里面实现功能，代码如下：

//全屏按钮点击的回调
const fullScreen = () => {
    //DOM对象的一个属性:可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
    let full = document.fullscreenElement;
    //切换为全屏模式
    if (!full) {
        //文档根节点的方法requestFullscreen,实现全屏模式
        document.documentElement.requestFullscreen();
    } else {
        //变为不是全屏模式->退出全屏模式，exitFullscreen()文档根节点中的方法，退出全屏模式
        document.exitFullscreen();
    }
}