js设置全屏显示和取消全屏显示，实现F11功能

点击后

<template>
	<div>
		  <el-button type="primary" @click="butClick()">{{content}}</el-button>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				content: '全屏显示',
				type:false
			};
		},
		watch: {

		},
		methods: {
			butClick(){
				if(this.type){
					this.content = "全屏显示";
                    // 取消全屏
					if(document.exitFullscreen){
						document.exitFullscreen()
					}else if(document.webkitCancelFullScreen){
						document.webkitCancelFullScreen()
					}else if(document.mozCancelFullScreen){
						document.mozCancelFullScreen()
					}else if(document.msExitFulldcreen){
						document.msExitFulldcreen()
					}
					this.type = false
				}else{
					this.content = "取消全屏";
                    // 全屏
					var element = document.documentElement
					if(element.requestFullscreen){
						element.requestFullscreen()
					}else if(element.webkitRequestFullScreen){
						element.webkitRequestFullScreen()
					}else if(element.mozRequestFullScreen){
						element.mozRequestFullScreen()
					}else if(element.msRequestFulldcreen){
						element.msRequestFulldcreen()
					}
					this.type = true
				}
			}
		}
	}
</script>