在vue中实现全屏退出全屏的功能

直接上实现效果：

一、先进行安装

npm install --save screenfull

二、template写入

<div @click="clickFullscreen">
        <img src="../../assets/big.png" alt  width="15px" height="15px"/>全屏
 </div>

三、在script引入并写入

![import screenfull from "screenfull";](https://img-blog.csdnimg.cn/20200917202233775.gif#pic_center)

export default {
     
  data() {
     
    return {
     
      isFullscreen: false,
    };
  },
  methods: {
     
    clickFullscreen() {
     
      if (!screenfull.isEnabled) {
     
        this.$message({
     
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
  },
  // 全屏事件  兼容
  clickFullscreen() {
     
    let element = document.documentElement;
    if (this.isFullscreen) {
     
      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.isFullscreen = !this.isFullscreen;
  },
};