vue中点击按钮实现全屏功能

这篇文章主要为大家详细介绍了vue-cli点击实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>