Vue+ElementUI实现点击按钮全屏功能

2021-08-05 阅读：4244 类型：前端分类：Vue 标签： Vue ElementUI

用vue做网站后台的时候，我们有时需要做个点击按钮进入全屏的功能，以下是个案例，共大家参考。

按钮模块代码

<template>
<div>
	<a href="javascript:;" title="全屏" @click="screen()"><i class="iconfont icon-quanping"></i></a>
</div>
</template>

js部分代码：

<script>
  export default {
    data(){
      return{
        //全屏
        fullscreen: false,
      }
    },
}

      screen(){
        let element = document.documentElement;
          if (this.fullscreen) {
            this.$message.success("退出全屏模式");
            this.fullscreenTitle = "进入全屏模式";
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
              document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            }
          } else {
            this.$message.success("进入全屏模式");
            this.fullscreenTitle = "退出全屏模式";
            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>