vue.js에서 전체 화면 표시 기능을 구현하는 방법

vue.js에서 전체 화면 표시 기능을 구현하는 방법: 1. vue-fullscreen을 설치합니다. 2. main.js에서 참조 및 등록합니다. 3. [this.$fullscreen. enter(dom, {wrap: false, callback:...].

이 기사의 운영 환경: windows10 시스템, vue 2.5.2, thinkpad t480 컴퓨터

실제 개발 과정에서 다음과 같은 문제가 발생할 수 있습니다. 페이지의 특정 부분을 전체 화면으로 만들어야 합니다. 실제로 디스플레이를 구현하는 방법은 여러 가지가 있지만 오늘은 vue 기반 구현만 소개합니다.

구체적인 단계는 다음과 같습니다.

1. fullscreen

프로젝트

‘npm install vue-fullscreen’

2에서 명령어를 실행하고, main.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 training

위 내용은 vue.js에서 전체 화면 표시 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!