vue js实现全屏得两种办法

1.原生js实现

<template>

  <div>

    <div style="height:500px;width:500px; background:pink;" id="con_lf_top_div"  @click="screen">

    </div>

  </div>

</template>

<script>

export default {

  name: "home",

  data() {

    return {

      //默认不全屏

      fullscreen:false,

    };

  },

  methods: {

    screen(){

        // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果

        let element = document.getElementById('con_lf_top_div');//设置后就是   id==con_lf_top_div 的容器全屏

          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) {

             element.msRequestFullscreen();

            }

          }

          this.fullscreen = !this.fullscreen;

    }

  }

};

</script>

 

 

2.插件 screenfull实现

npm install screenfull@4.2.0 --save

 

<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>