前端vue实现全屏和按esc退出全屏功能

£神魔★判官ぃ 2023-03-13 11:36 58阅读 0赞

效果如下:
在这里插入图片描述
在这里插入图片描述

不多说,直接上代码如下,复制即可使用,注意图片位置修改即可:

1、vue页面中根据是否全屏判断当前显示图片或icon图标,isFullScren为true时表示全屏,默认值为false,并绑定click事件

  1. <el-tooltip
  2. :content="isFullScren?'退出全屏':'全屏'"
  3. effect="dark"
  4. placement="bottom">
  5. <div class="top-bar__item" style="height: 30px;" @click="fullScreenEvent">
  6. <!--<img style="height:20px;margin:0 10px" :src="isFullScren?tuichuquanping:quanping"/>-->
  7. <i :class="isFullScren?'el-icon-crop':'el-icon-full-screen'" @click="fullScreenEvent"></i>
  8. </div>
  9. </el-tooltip>

2、click全屏事件

  1. data() {
  2. return {
  3. isFullScren:false,
  4. quanping:require('@/assets/img/header/quanping.png'),
  5. tuichuquanping:require('@/assets/img/header/tuichuquanping.png')
  6. }
  7. }
  8. methods: {
  9. fullScreenEvent() {
  10. let el = document.documentElement;
  11. if (this.isFullScren) {
  12. if (document.exitFullscreen) {
  13. document.exitFullscreen();
  14. } else if (document.mozCancelFullScreen) {
  15. document.mozCancelFullScreen();
  16. } else if (document.webkitCancelFullScreen) {
  17. document.webkitCancelFullScreen();
  18. } else if (document.msExitFullscreen) {
  19. document.msExitFullscreen();
  20. }
  21. } else {
  22. if (el.requestFullscreen) {
  23. el.requestFullscreen();
  24. } else if (el.mozRequestFullScreen) {
  25. el.mozRequestFullScreen();
  26. } else if (el.webkitRequestFullScreen) {
  27. el.webkitRequestFullScreen();
  28. } else if (el.msRequestFullscreen) {
  29. el.msRequestFullscreen();
  30. }
  31. }
  32. },
  33. }

3、 页面初始化渲染完成后,绑定fullscreenchange的全屏改变监听事件,这样按esc退出全屏时也会触发

  1. mounted() {
  2. let isFullscreen =
  3. document.fullscreenElement ||
  4. document.mozFullScreenElement ||
  5. document.webkitFullscreenElement ||
  6. document.fullScreen ||
  7. document.mozFullScreen ||
  8. document.webkitIsFullScreen;
  9. isFullscreen = !!isFullscreen;
  10. let that = this;
  11. document.addEventListener("fullscreenchange", () => {
  12. that.isFullScren = !that.isFullScren;
  13. });
  14. document.addEventListener("mozfullscreenchange", () => {
  15. that.isFullScren = !that.isFullScren;
  16. });
  17. document.addEventListener("webkitfullscreenchange", () => {
  18. that.isFullScren = !that.isFullScren;
  19. });
  20. document.addEventListener("msfullscreenchange", () => {
  21. that.isFullScren = !that.isFullScren;
  22. });
  23. },

发表评论

表情:
评论列表 (有 0 条评论,58人围观)

还没有评论,来说两句吧...

相关阅读