本文例項為大家分享了vue-cli點選實現全屏功能的具體程式碼，供大家參考，具體內容如下

專案中有點選按鈕實現全屏功能

方式一：js實現全屏

程式碼如下：

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

<script>
  export default {
    name: "index",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;
    }
   }
  }
</script>

<style scoped>

</style>

方式二：使用的是sreenfull外掛，執行命令安裝

npm install --save screenfull

在使用的頁面正確引入：

import screenfull from ‘screenfull'

程式碼如下：

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

<script>
 import screenfull from 'screenfull'
 export default {
  name: "home",data() {
   return {
    //預設不全屏
    isFullscreen: false
   }
  },methods: {
   screen(){
    // 如果不允許進入全屏，發出不允許提示
    if (!screenfull.enabled) {
     this.$message('您的瀏覽器不能全屏');
     return false
    }
    screenfull.toggle();
    this.$message.success('全屏啦')
   }
  }
 }
</script>

<style scoped>

</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。