#vue#实现浏览器全屏可视化（进入、退出全屏）附源码

最新推荐文章于 2023-09-01 15:54:37 发布

Miraitowa_chole

最新推荐文章于 2023-09-01 15:54:37 发布

阅读量533

点赞数

分类专栏：大屏（浏览器）文章标签： vue.js javascript css3 前端 electron

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/124180688

版权

大屏（浏览器）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：

点击按钮，实现全屏，再次点击，退出全屏

效果如下：

（1）原页面：

（2）点击全屏按钮后的页面（已进入全屏模式）

（3）点击退出全屏按钮后的页面（已退出全屏模式）

源码如下

<template>
    <div class="largeScreen">
        <el-row :gutter="20" >
            <el-col :span="6">
                <div class="grid-content"><img src="../assets/1.png" class="gird_img"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content"><img src="../assets/1.png" class="gird_img"></div>
            </el-col>
            <el-col :span="6" >
                <div class="grid-content"><img src="../assets/1.png" class="gird_img"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content"><img src="../assets/1.png" class="gird_img"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content"><img src="../assets/1.png" class="gird_img"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content"><img src="../assets/1.png" class="gird_img"></div>
            </el-col>
        </el-row>
        <!-- //页面左右两边，各设置两个按钮，一个显示，一个隐藏 -->
        <!-- //绑定进入、退出全屏的点击事件 -->
        <div class="sigOut_btn_left" v-if="fullScreenShow" @click="fullScreen" ><img src="../assets/sigOut.png" alt=""></div>
        <div class="sigOut_btn_left" v-if="exitFullScreenShow" @click="exitFullScreen" ><img  src="../assets/sigOut.png" alt="" >退出全屏</div> <!-- //退出全屏 -->
        <div class="sigOut_btn_right" v-if="fullScreenShow" @click="fullScreen" ><img src="../assets/sigOut.png" alt="" ></div>
        <div class="sigOut_btn_right" v-if="exitFullScreenShow" @click="exitFullScreen" ><img src="../assets/sigOut.png" alt="" >退出全屏</div> <!-- //退出全屏 -->
    </div>
</template>
<script>
export default {
    data () {
        return {
            fullScreenShow:true, //全屏按钮
            exitFullScreenShow:false //退出全屏按钮
        }
    },
    mounted() {
        this.fullScreen();//一进入页面显示大屏
    },
    methods: {
        //js控制进入全屏（点击按钮）
        fullScreen() {
            this.exitFullScreenShow = true;
            this.fullScreenShow = false
            var el = document.documentElement,
            rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
            wscript;
            if(typeof rfs != "undefined" && rfs) {
                rfs.call(el);
                return;
            }
            if(typeof window.ActiveXObject != "undefined") {
                wscript = new ActiveXObject("WScript.Shell");
                if(wscript) {
                    wscript.SendKeys("{F11}");
                }
            }
        },
        //js控制退出全屏（点击按钮）
        exitFullScreen() {
            this.exitFullScreenShow = false;
            this.fullScreenShow = true;   
            var el = document,
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
            wscript;
            if (typeof cfs != "undefined" && cfs) {
                cfs.call(el);
                return;
            }
            if (typeof window.ActiveXObject != "undefined") {
                wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                    }
                }
            }
        }
    }
</script>
<style type="text/css" lang="scss" scoped>
.largeScreen {
    width: 95%;
    margin: auto;
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .grid-content {
        border-radius: 20px;
        min-height: 36px;
        .gird_img {
        width: 100%;
        border-radius: 20px;
        }
    }
    .sigOut_btn_left {
        width: 78px;
        height: 78px;
        position: fixed;
        bottom: 78px;
        left: 62px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #000;
        text-align:center;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .sigOut_btn_right {
        width: 78px;
        height: 78px;
        position: fixed;
        bottom: 78px;
        right: 62px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #000;
        text-align:center;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>