vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue cli点击全屏

vue-cli点击实现全屏功能

作者:zeke_x

这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文