1. 程式人生 > >vue 實現全屏和退出全屏的功能

vue 實現全屏和退出全屏的功能

<span class="icon-contain" @click="getFullCreeen">
     <svg-icon icon-class="quanping" />
</span>

JS

export default {
    name:'topHeader',
    data(){
       return{
           n:0
       }
    },
    methods:{
        getFullCreeen(){
            this.n++;
            this.n%2==0? 
            this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
        },
        inFullCreeen(element){
            let el = element;
            let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
                el.mozRequestFullScreen || el.msRequestFullScreen;
            if (typeof rfs != "undefined" && rfs) { 
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                let wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        },
        outFullCreeen(element){
            let el = element;
            let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
                el.mozCancelFullScreen || el.exitFullScreen;
            if (typeof cfs != "undefined" && cfs) { 
                cfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                let wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    }
}

但是發現在我的系統內,出現一個bug,文字提示會被遮擋,如下:

也沒有找到去掉提示的辦法,下一篇文章一定要解決這個問題!