How to realize the function of full screen display by vue.js

This article mainly shows you "vue.js how to achieve full-screen display function", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue.js how to achieve full-screen display function" this article.

The method for vue.js to achieve full-screen display is as follows: 1. Install vue-fullscreen;2, reference and register in mian.js; 3. Call full-screen methods, such as [this.$fullscreen.enter (dom, {wrap: false,callback:...].

This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.

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

The specific steps are as follows:

1. Install vue-fullscreen

Execute commands in a 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 element let dom = this.$el.querySelector ('.videosList') / / call the full screen method this.$fullscreen.enter (dom, {wrap: false) Callback: F = > {this.fullscreenFlag = f}})} these are all the contents of the article "how to achieve full screen display in vue.js" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!