How to implement full screen display function in vue.js

Vue.js method to implement full-screen display function: 1. Install vue-fullscreen; 2. Reference and register in main.js; 3. Call the full-screen method, such as [this.$fullscreen.enter(dom , {wrap: false,callback:...].

The operating environment of this article: windows10 system, vue 2.5.2, thinkpad t480 computer.

In actual development, we may encounter situations where we need to display a certain part of the page in full screen. In fact, there are many ways to implement it, but today we only introduce the implementation method based on vue.

The specific steps are as follows:

1. Install vue-fullscreen

Execute the command in the project

‘npm install vue-fullscreen’

2. Reference and register in mian.js

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

3. Specific code implementation:

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

Learning recommendation: php training

The above is the detailed content of How to implement full screen display function in vue.js. For more information, please follow other related articles on the PHP Chinese website!