页面全屏显示

本文介绍如何利用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;
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值