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. vue-fullscreenをインストールします

プロジェクト内のコマンドを実行します

‘npm install vue-fullscreen’

2. mian.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 中国語 Web サイトの他の関連記事を参照してください。