vue 實現全屏和退出全屏的功能
阿新 • • 發佈:2018-12-18
<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,文字提示會被遮擋,如下:
也沒有找到去掉提示的辦法,下一篇文章一定要解決這個問題!