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       
          	}     
        })    
 }

學習推薦：php訓練

以上是vue.js怎麼實現全螢幕顯示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！