首页 > 其他分享 >全屏

全屏

时间:2023-09-22 10:00:30浏览次数:31  
标签:isFullscreen value else 全屏 element document

全屏

		<a-button
            class="nav-btn"
            type="outline"
            :shape="'circle'"
            @click="toggleFullScreen"
          >
            <template #icon>
              <icon-fullscreen-exit v-if="isFullscreen" />
              <icon-fullscreen v-else />
            </template>
          </a-button>
//全屏方法
const isFullscreen = ref(false);
const toggleFullScreen = () => {
  let element = document.documentElement;
  if (isFullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
  }
  isFullscreen.value = !isFullscreen.value;
};

标签:isFullscreen,value,else,全屏,element,document
From: https://www.cnblogs.com/sxliu414/p/17721634.html

相关文章

  • RK3568开发笔记(十):开发板buildroot固件移植开发的应用Demo,启动全屏显示
    前言  上一篇,移植应用前的通讯接口工作和全屏工作都已经完成了。本篇移植开发的商业应用。<br>交叉编译好应用  (略),参照《RK3568开发笔记(八):开发板烧写buildroot固件(支持hdmi屏),搭建Qt交叉编译开发环境,编译一个Demo,目标板运行Demo测试》<br>解决全屏标题栏占用问题  交叉......
  • RK3568开发笔记(十):开发板buildroot固件移植开发的应用Demo,启动全屏显示
    前言  上一篇,移植应用前的通讯接口工作和全屏工作都已经完成了。本篇移植开发的商业应用。 交叉编译好应用  (略),参照《RK3568开发笔记(八):开发板烧写buildroot固件(支持hdmi屏),搭建Qt交叉编译开发环境,编译一个Demo,目标板运行Demo测试》 解决全屏标题栏占用问题......
  • vue3 浏览器“Uncaught runtime errors:” 全屏报错提示关闭
      在项目的vue.config.js中配置module.exports={devServer:{client:{overlay:false//编译错误时,取消全屏覆盖(建议关掉)}}}......
  • vue 嵌套全屏iframe 能有效避开返回两次才能返回上一个路由的问题
    <template> <divclass="home">  <iframeref="iframe"class="iframe"frameborder="no"></iframe> </div></template><script>import{ get_doctor_info, statistics, ......
  • android 相机应用全屏显示 方法
     android相机应用全屏显示方法1.可以调用如下setFullscreen方法实现全屏显示,2.在相机界面全屏加载时候回闪现状态栏,需要给activity主题MainThemeCamera配置一个全屏的背景android:windowBackground来规避状态栏闪现问题。/***决定是否隐藏状态栏和导航栏*......
  • Android全面屏下,默认不会全屏显示,屏幕底部会留黑问题
    公司以前的老项目,便出现了这种情况,网上搜索了各种资料,用了各种库,依然无法解决这个问题。如图所示:最终功夫不负有心人,在Application中看到了,这样一个属性android:resizeableActivity=“false”这个属性设置为了false,我们新建的项目,是没有这个属性的,然后我把这个属性设置为了true......
  • window.showModalDialog与window.open全屏显示
    搞了半天就是搞不出模式对话框的全屏显示,原来其与window.open的参数设置完全不同.functionwinModalFullScreen(strURL){varsheight=screen.height-70;varswidth=screen.width-10;varwinoption="dialogHeight:"+sheight+"px;dialogWidth:"+swidth+"px;status:ye......
  • iOS开发之--全局解决模态弹出不全屏展示问题
    利用tuntime的特性,创建一个UIViewController的类别,然后再pch文件里面调用即可,代码如下:.h#import<UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interfaceUIViewController(SKPVCModel)@endNS_ASSUME_NONNULL_END.m#import"UIViewController+SKPVCModel.h"#import<objc/ru......
  • 全屏显示
    默认情况下,ubuntu在VirtualBox中,无法全屏,如下图:使用缩放模式,可以完成全屏模式,但是画面完全变形,如下图:解决方法step-1设备->安装增强功能如图:step-2步骤执行后,ubuntu系统桌面会新增一个图标,如下图:step-3双击图标,进入后,点击运行,如下图:step-4安装运行step-5认证......
  • HTML 全屏水印 vue 全屏水印
    HTML全屏水印vue全屏水印<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>水印</title><style>#water-div{pointer-events:none;position:fixed;top:0;left:0;right:0;bottom:0;}......