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>