fullScreen.vue 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <div style="height: 35px" ref="fullScreen">
  3. <img style="width: 16px; height: 16px;line-height:16px;vertical-align: middle" @click="enterFullscreen" src="@/assets/icons/fullScroll.svg" title="全屏" v-if="isFull">
  4. <img style="width: 16px; height: 16px;line-height:16px;vertical-align: middle" @click="backFullscreen" src="@/assets/icons/fullBack.svg" title="退出全屏" v-else>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: "fullScreen",
  10. props:["domId",'scrollHeight'],
  11. data(){
  12. return {
  13. isFull:true,
  14. scrollSave:''
  15. }
  16. },
  17. methods:{
  18. /*全屏*/
  19. enterFullscreen(){
  20. this.scrollSave = this.scrollHeight
  21. /* 获取(<html>)元素以全屏显示页面 */
  22. const full = document.getElementById(this.domId)
  23. if (full.RequestFullScreen) {
  24. full.RequestFullScreen()
  25. //兼容Firefox
  26. } else if (full.mozRequestFullScreen) {
  27. full.mozRequestFullScreen()
  28. //兼容Chrome, Safari and Opera等
  29. } else if (full.webkitRequestFullScreen) {
  30. full.webkitRequestFullScreen()
  31. //兼容IE/Edge
  32. } else if (full.msRequestFullscreen) {
  33. full.msRequestFullscreen()
  34. }
  35. },
  36. /*全屏还原*/
  37. backFullscreen(){
  38. /*this.onBack = false
  39. this.height = 'calc(100vh - 350px)'*/
  40. if (document.exitFullscreen) {
  41. document.exitFullscreen();
  42. } else if (document.webkitCancelFullScreen) {
  43. document.webkitCancelFullScreen();
  44. } else if (document.mozCancelFullScreen) {
  45. document.mozCancelFullScreen();
  46. } else if (document.msExitFullscreen) {
  47. document.msExitFullscreen();
  48. }
  49. },
  50. handleFullscreenChange () {
  51. if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
  52. // 全屏模式激活
  53. this.isFull = false
  54. this.$emit('onFull')
  55. } else {
  56. // 全屏模式退出
  57. this.isFull = true
  58. console.log('全屏模式已退出',this.scrollSave);
  59. this.$emit('backFull',this.scrollSave)
  60. this.scrollSave = ''
  61. }
  62. }
  63. },
  64. mounted() {
  65. document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  66. document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
  67. document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  68. document.addEventListener('MSFullscreenChange',this.handleFullscreenChange)
  69. }
  70. }
  71. </script>
  72. <style scoped>
  73. </style>