0
点赞
收藏
分享

微信扫一扫

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

需求:

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

效果如下:

(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>
举报

相关推荐

0 条评论