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>

以上就是vue-cli点击如何实现全屏功能。谁卑微了承诺,放肆了寂寞,又丢下了我。更多关于vue-cli点击如何实现全屏功能请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
vue全屏事件开发详解

vue如何实现全屏滚动效果(非fullpage.javascript)

vue中如何实现全屏以及对退出全屏的监听

vue如何实现浏览器全屏展示功能

vue-video-player 如何解决微信自动全屏播放问题(横竖屏导致样式错乱问题)