vue实现全屏

使用浏览器全屏API实现

在Vue中可以通过调用浏览器的全屏API实现全屏功能。需要检测不同浏览器的前缀兼容性。

// 进入全屏
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}

封装为Vue指令

可以封装为可复用的Vue指令，方便在模板中使用。

Vue.directive('fullscreen', {
  inserted(el, binding) {
    if (binding.value) {
      requestFullscreen(el)
    }
  },
  update(el, binding) {
    if (binding.value) {
      requestFullscreen(el)
    } else {
      exitFullscreen()
    }
  }
})

模板中使用方式：

<div v-fullscreen="isFullscreen"></div>

使用第三方库

可以使用专门的全屏库如screenfull简化实现。

安装：

npm install screenfull

使用示例：

import screenfull from 'screenfull'

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.container)
      }
    }
  }
}

全屏状态监听

需要监听全屏状态变化来更新组件状态。

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange)
  document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
  document.addEventListener('msfullscreenchange', this.handleFullscreenChange)
},
methods: {
  handleFullscreenChange() {
    this.isFullscreen = !!(document.fullscreenElement || 
                          document.webkitFullscreenElement || 
                          document.msFullscreenElement)
  }
}

样式调整

全屏模式下可能需要调整样式，CSS可以通过伪类选择器。

:fullscreen {
  background-color: #fff;
}

:-webkit-full-screen {
  background-color: #fff;
}

:-ms-fullscreen {
  background-color: #fff;
}