Comment implémenter la fonction d'affichage plein écran dans vue.js

Comment implémenter la fonction d'affichage plein écran dans vue.js : 1. Installez vue-fullscreen ; 2. Référencez et enregistrez-vous dans main.js 3. Appelez la méthode plein écran, telle que [this.$fullscreen. enter(dom, {wrap: false, callback:...].

L'environnement d'exploitation de cet article : système Windows10, vue 2.5.2, ordinateur thinkpad t480

En développement réel, nous pouvons rencontrer le Il est nécessaire de rendre une certaine partie de la page en plein écran. Il existe en fait de nombreuses façons d'implémenter l'affichage, mais aujourd'hui, nous présentons uniquement l'implémentation basée sur vue

Les étapes spécifiques sont les suivantes :

1.

Exécutez la commande dans le projet

‘npm install vue-fullscreen’

2, référencez et enregistrez-vous dans main.js

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

3 Implémentation de code spécifique :

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

Apprentissage recommandé : formation php

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!