vue 全屏

html

<img class="full-screen" :src="isFullscreen?fullScreenImg.quit:fullScreenImg.enter" @click="fullScreen" alt="">

js

export default{
	 data(){
		retun{
			isFullscreen: true,
			 fullScreenImg: {
		         enter: require('../../assets/images/fullscreen.png'),
		         quit: require('../../assets/images/quitfullscreen.png'),
		     },

		}
	},
	mounted(){
		this.watchScreen()
	},
	methods:{
		// 切换全屏状态
      fullScreen () {
        if(this.isFullscreen){
          this.quit()
          this.isFullscreen = !this.isFullscreen
        }else{
          this.enter()
          this.isFullscreen = !this.isFullscreen
        }
      },
	// 退出全屏
	quit(){
        if(document.exitFullScreen) {
          document.exitFullScreen();
        } else if(document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if(element.msExitFullscreen) {
          element.msExitFullscreen();
        }
      },
	// 进入全屏
	enter(){
        var de = document.documentElement;
        if (de.requestFullscreen) {
          de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
        }
      },
	// 监听页面是否是全屏
      watchScreen(){
        // window.onresize = () => {
          const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
          if(isFullScreen){
            this.isFullscreen = true
          }else{
            this.isFullscreen = false
          }
        // }
      },

	}
}