vue 全屏按钮切换

    
    <img class="box" v-if="!showFullScreen" src="../assets/img/full.png" @click="showFullScreenFun" style="position: fixed;top: 0.05rem;right: 0.1rem;"/>
    <img class="box" v-else src="../assets/img/empty.png" @click="showFullScreenFun" style="position: fixed;top: 0.05rem;right: 0.1rem;"/>

mounted(){
	// -------------------
    shopBus.$on('timeout', msg => {
        this.timeout = msg
      })
    //   console.log(this.$route.query)
      console.log(this.timeout)
      let vm = this
      window.addEventListener('keydown', function (e) {
        e = e || window.event
        if (e.key == "F11") {
          e.preventDefault()
          vm.showFullScreenFun()
        }
    })
    // --------------------
}

methods:{
	//   全屏
    showFullScreenFun() {
        this.showFullScreen = !this.showFullScreen;
        var dom = document.getElementById('bigbox')
        this.toggleFullScreen(dom)
    },
    toggleFullScreen(e) {
        this.FullScreen(e);
    },
    FullScreen(el) {
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (!isFullscreen) { //进入全屏,多重短路表达式
          (el.requestFullscreen && el.requestFullscreen()) ||
          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el
            .msRequestFullscreen());

        } else { //退出全屏,三目运算符
          document.exitFullscreen ? document.exitFullscreen() :
            document.mozCancelFullScreen ? document.mozCancelFullScreen() :
            document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
        }
    },
    // --------------------------------
}