溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue.js如何實現全屏顯示功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue.js如何實現全屏顯示功能”這篇文章吧。
vue.js實現全屏顯示功能的方法：1、安裝vue-fullscreen；2、在mian.js中引用并注冊；3、調用全屏方法，如【this.$fullscreen.enter(dom, {wrap: false,callback:...】。
本文操作環境：windows10系統、vue 2.5.2、thinkpad t480電腦。
在實際開發中我們可能會遇到需要將頁面中的某一部分全屏顯示的情況，其實實現方式有很多種，但是今天我們只介紹基于vue的實現方式。
具體步驟如下所示：
1、安裝vue-fullscreen
在項目中執行命令
‘npm install vue-fullscreen’
2、在mian.js中引用并注冊
import fullscreen from 'vue-fullscreen' Vue.use(fullscreen)
3、具體代碼實現：
fullscreen() {
// 需要全屏顯示的dom元素
let dom = this.$el.querySelector('.videosList')
// 調用全屏方法
this.$fullscreen.enter(dom, {
wrap: false,
callback: f => {
this.fullscreenFlag = f
}
})
}以上是“vue.js如何實現全屏顯示功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
