全网最详细的vue2 全屏与退出全屏-CSDN博客

本文介绍了在Vue2项目中如何实现全屏和退出全屏功能，包括JavaScript方法和使用SVG图标展示操作提示。作者还提供了详细的代码片段，展示了如何在模板中使用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文章引导

二、博主简介

🌏博客首页： 水香木鱼
📑文章摘要：vue2 全屏与退出全屏
💌春波寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

三、文章内容

(1)、script

 data() {
    return {
       isFullscreen: false,//全屏状态
    }
},
methods: {
    /*全屏*/
    toFullOrExit() {
      this.isFullscreen = !this.isFullscreen;
      if (this.isFullscreen) {
        this.requestFullScreen();
      } else {
        this.exitFullscreen();
      }
    },

    requestFullScreen() {
      let de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    exitFullscreen() {
      let de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    },
    /*END*/
}

(2)、template

关于svg如何使用，请参考：全网最详细的vue2引入svg详细步骤

 <el-tooltip
   class="item"
   effect="dark"
   :content="isFullscreen ? '退出全屏' : '全屏'"
   placement="left">
     <a
       href="javascript:void(0)"
       title="全屏"
       class="toolbar_item back2top"
       @click="toFullOrExit">
         <svg-icon icon-class="quxiaoquanping" width="20px" height="20px" class="shapeHand" v-if="isFullscreen"></svg-icon>
         <svg-icon icon-class="quanping" width="20px" height="20px" class="shapeHand" v-else></svg-icon>
     </a>
</el-tooltip>