vue-cli点击实现全屏功能

190 阅读 0 评论 126 点赞

我是靠谱客的博主美好秀发，最近开发中收集的这篇文章主要介绍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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。