Vue项目点击按钮浏览器全屏

DOM(ElementUI)

<el-tooltip :content="fullscreenTitle" placement="bottom">
	<i :class="['fa fa-expand',{'fa fa-compress':fullscreen}]" id="fullScreen" @click="fullScreen"></i>
</el-tooltip>

data

data(){
	return{
		fullscreen: false,
     	fullscreenTitle:"进入全屏模式"
	}
},
methods:{
	fullScreen(){
      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;
    }
}