fullScreen.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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. console.log('全屏')
  54. this.isFull = false
  55. this.$emit('onFull')
  56. } else {
  57. // 全屏模式退出
  58. this.isFull = true
  59. console.log('全屏模式已退出',this.scrollSave);
  60. this.$emit('backFull',this.scrollSave)
  61. this.scrollSave = ''
  62. }
  63. }
  64. },
  65. mounted() {
  66. document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  67. document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
  68. document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  69. document.addEventListener('MSFullscreenChange',this.handleFullscreenChange)
  70. }
  71. }
  72. </script>
  73. <style scoped>
  74. </style>