页面全屏显示

最新推荐文章于 2024-08-14 16:05:04 发布

原创最新推荐文章于 2024-08-14 16:05:04 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #html5

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何利用Vue.js和HTML5全屏API，实现网页的全屏显示功能。通过设置特定样式和Vue.js指令，可以轻松达到全屏效果。

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

样式

<div class="fullScreen">
          <el-tooltip
            class="item"
            effect="dark"
            :content="isFullScreen ? '退出全屏' : '进入全屏'"
            placement="top"
          >
            <i
              class="el-icon-full-screen"
              @click="fullScreen"
              v-if="!isFullScreen"
            ></i>
            <i class="el-icon-crop" @click="exitFullscreen" v-else></i>
          </el-tooltip>
</div >

实现

 fullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
      this.isFullScreen = true;
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      this.isFullScreen = false;
    },