vueの中でクリックがフルスクリーンになる様々な方法を実現します。

プロジェクトにはクリックボタンがあります。フルスクリーン機能を実現します。
方式一：jsはフルスクリーンを実現します。

<template>
 <div>
   <a-button type="primary" @click="screen">  </a-button>
 </div>
</template>

ダタ:

 data() {
  return {
   fullscreen: false
  };
 },

methods:

screen() {
   let element = document.documentElement;
   if (this.fullscreen) {
    if (document.exitFullscreen) {
     document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
     document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
     document.msExitFullscreen();
    }
   } else {
    if (element.requestFullscreen) {
     element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
     element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
     element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
     // IE11
     element.msRequestFullscreen();
    }
   }
   this.fullscreen = !this.fullscreen;
  },

方式二：sreenfullプラグインを使用して、コマンドのインストールを実行します。

npm install --save screenfull

使用するページに正しくインポートします。

import screenfull from ‘screenfull'

コードは以下の通りです

<template>
   <div>
     <a-button type="primary" @click="screen">  </a-button>
   <div>
</template>

ダタ:

 data() {
  return {
   fullscreen: false
  };
 },

methods:

screen() {
   //          ，       
   if (!screenfull.enabled) {
    this.$message("         ");
    return false;
   }
   screenfull.toggle();
   this.$message.success("   ");
  },

効果図:

実用的
ここで、vueの中でクリックしてフルスクリーンになる様々な方法についての文章を紹介します。もっと関連しているのはフルスクリーンの内容をクリックしてください。以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。