vue 一键全屏指令

余寿

关注

阅读 60

2022-02-14

Vue.directive('fullscreen', function (el, v) {   

//全屏的指令 用法: <div v-fullscreen></div> //默认不全屏   

​let fullscreen = false;        el.onclick = () => {

      let element = document.documentElement;      if (fullscreen) {        if (document.exitFullscreen) {          document.exitFullscreen();        } else if (document.webkitCancelFullScreen) {          document.webkitCancelFullScreen();        } else if (document.mozCancelFullScreen) {          document.mozCancelFullScreen();        } else if (document.msExitFullscreen) {          document.msExitFullscreen();        }      } else {        if (element.requestFullscreen) {          element.requestFullscreen();        } else if (element.webkitRequestFullScreen) {          element.webkitRequestFullScreen();        } else if (element.mozRequestFullScreen) {          element.mozRequestFullScreen();        } else if (element.msRequestFullscreen) {          // IE11          element.msRequestFullscreen();        }      }      fullscreen = !fullscreen;    } 

})

精彩评论(0)

0 0 举报