這篇文章將為大家詳細(xì)講解有關(guān)vue實(shí)現(xiàn)全屏事件的源代碼，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)公司、手機(jī)網(wǎng)站制作設(shè)計、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)公司、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為三輪攪拌車行業(yè)客戶提供了網(wǎng)站改版服務(wù)。
在項(xiàng)目中有需求相應(yīng)瀏覽器全屏，寫了個案例代碼
先看看效果吧
全屏顯示：
html代碼：
js代碼
重慶分公司
重慶分公司
data(){
return {
fullscreen: false
}
}
// 全屏事件
handleFullScreen(){
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},通過fullscreen判斷的true和false確定是否相應(yīng)全屏
關(guān)于vue實(shí)現(xiàn)全屏事件的源代碼就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
