vue.js如何實(shí)現(xiàn)全屏顯示功能

這篇文章主要為大家展示了“vue.js如何實(shí)現(xiàn)全屏顯示功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue.js如何實(shí)現(xiàn)全屏顯示功能”這篇文章吧。

vue.js實(shí)現(xiàn)全屏顯示功能的方法：1、安裝vue-fullscreen；2、在mian.js中引用并注冊(cè)；3、調(diào)用全屏方法，如【this.$fullscreen.enter(dom, {wrap: false,callback:...】。

本文操作環(huán)境：windows10系統(tǒng)、vue 2.5.2、thinkpad t480電腦。

在實(shí)際開(kāi)發(fā)中我們可能會(huì)遇到需要將頁(yè)面中的某一部分全屏顯示的情況，其實(shí)實(shí)現(xiàn)方式有很多種，但是今天我們只介紹基于vue的實(shí)現(xiàn)方式。

具體步驟如下所示：

1、安裝vue-fullscreen

在項(xiàng)目中執(zhí)行命令

‘npm install vue-fullscreen’

2、在mian.js中引用并注冊(cè)

import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)

3、具體代碼實(shí)現(xiàn)：

fullscreen() {
	// 需要全屏顯示的dom元素
	let dom = this.$el.querySelector('.videosList')     
        // 調(diào)用全屏方法      
        this.$fullscreen.enter(dom, {  
        	wrap: false, 
          	callback: f => {
                	this.fullscreenFlag = f       
          	}     
        })    
 }

以上是“vue.js如何實(shí)現(xiàn)全屏顯示功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！