preface

Preface don’t know what to write, directly on the code

<! <div class="screen-full" @click="handleFullScreen"> <! -- {{ isFullscreen ? }} --> < I :class="isFullscreen? 'el-icon-aim' : 'el-icon-full-screen'"></i> </div> </template> <script> export default { data () { return { show: false, isFullscreen: False}}, mounted () {// F11 is in full screen mode. // Window. addEventListener('keydown', this. keydown, true) // window.adDeventListener ('resize', () => {// if (! This.checkfull ()) {// this.isFullScreen = false //} //}, true) In full screen mode, ESC key events cannot be monitored. Void [' fullscreenChange ', 'webkitFullscreenchange ', ForEach ((item) => {window.adDeventListener (item, () => {console.log(' window changes ', this.checkFull()) this.isFullscreen = this.checkFull() }) }) }, methods: {// button event handleFullScreen () {this.isfullscreen? this.screenfullOut() : Enclosing screenfullEnter ()}, / / keyboard events / / keyDown (e) {/ / const el = e | | window. The event / / / / this kind of treatment, Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture ", this is because full screen can only be triggered from events (user event operations), // if (el.keyCode === 122) {// el.returnValue = false // this.screenFullenter () //} // / / enter full-screen screenfullEnter () {const el = document. The documentElement const eventEnter = el. RequestFullScreen | | el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen if (typeof eventEnter ! == 'undefined' && eventEnter) { eventEnter.call(el) // this.isFullscreen = true } }, / / exit full-screen screenfullOut () {let eventOut = document. CancelFullScreen | | document. WebkitCancelFullScreen | | document.mozCancelFullScreen || document.msExitFullScreen if (typeof eventOut ! == 'undefined' && eventOut) { eventOut.call(document) // this.isFullscreen = false } }, / / check whether full-screen checkFull () {let isFull = document. FullscreenElement | | document. MozFullScreenElement | | document.webkitFullscreenElement || document.msFullscreenElement if (isFull === undefined) isFull = false return isFull } } } </script> <style lang="scss" scoped> .screen-full { position: fixed; top: 0; right: 0; width: 40px; height: 32px; line-height: 28px; text-align: center; // border: 2px solid rgba(2, 228, 235, 0.65); // box-shadow: 0 0 1px 6px rgba(2, 228, 235, 0.2); // border-radius: 5px 0 0 5px; cursor: pointer; / / the transition: all 0.3 s; overflow: hidden; i { font-size: 24px; color: #FFFFFF; } // &:hover { // right: 0px; // } } </style>Copy the code

Pay attention to

In the full-screen state, ESC key events cannot be monitored. You can change the full-screen state by listening for full-screen events to control icon display

Existing problems

F11: Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture “, this is because full screen can only be triggered from an event (user event action), not directly from code