vue 实现组件全屏展示及退出

一、组件

采用 vue-fullscreen 组件

二、实现方式

<fullscreen ref="fullscreen" @change="fullscreenChange" background="#ffffff">

      <div style="position: relative;" class="div-main" ref="main_div">

        <Icon :type="!fullscreen? 'ios-expand' : 'ios-contract'" size="30" class="expand-icon" @click="toggle" />

        需要全屏展示的内容

      </div>

    </fullscreen>

详细代码示例：https://download.csdn.net/download/you199037/15562304

三、实现效果

四、备注

参考地址：

https://github.com/mirari/vue-fullscreen

vue 实现组件全屏展示及退出的更多相关文章

  1. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. js页面的全屏展示和退出全屏显示

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  3. React实现组件全屏化

    介绍 本文基于React+antd,给大家演示一个完整的全屏demo. 起因是开发今天给我提了一个sql编辑器输入框比较小,不支持放大,不太方便.希望能够全屏显示,联想到自己以后可能也会需要,便研究并 ...

  4. html元素全屏展示

    参数传入dom对象即可,注意不是jQuery对象,Vue下兼容 /** * 面板全屏展示 */ fullscreen: function () { if (this.isFullScreen) { / ...

  5. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  6. requestFullscreen实现全屏展示

    requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...

  7. echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  8. iOS 多个播放器同时播放，双击全屏，单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

  9. H5视频播放自动全屏，暂停退出全屏等功能

    html5视频播放自动全屏,暂停退出全屏等功能 在参考了html5 video fullScreen全屏实现方式及司徒正美的书<javascript框架设计>287页相关代码后,在Safa ...

  10. QT中关于窗口全屏显示与退出全屏的实现

    近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...

随机推荐

  1. adorner 使用示例

    模块介绍 adorner 是一个现代轻量级的 Python 装饰器辅助模块. 目前该模块仅实现了 4 个类,对应着 4 个功能:制造装饰器.执行计时.函数缓存.捕获重试. 仓库地址:https://g ...

  2. LeViT：Facebook提出推理优化的混合ViT主干网络 | ICCV 2021

    论文提出了用于快速图像分类推理的混合神经网络LeVIT,在不同的硬件平台上进行不同的效率衡量标准的测试.总体而言,LeViT在速度/准确性权衡方面明显优于现有的卷积神经网络和ViT,比如在80%的Im ...

  3. 基于Java“萌宠之家”宠物综合服务平台设计实现(源码+lw+部署文档+讲解等)

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面 ...

  4. [oeasy]教您玩转python - 0006 - 自由软件运动和开源运动

    ​ 顺序执行 回忆上次内容 上次写了10000行代码 10000行代码 都是写在明面上的 人家一下载​​py​​ 文件 就能看个明明白白 修改或者运行程序都很方便 这程序全都这么公开出来 大家随意修改 ...

  5. OI生涯回忆&退役之后

    一个人的命运啊,当然要靠自我奋斗,但是也要考虑到历史的进程 --<庄子·秋水> 好吧,现在是2024年7月24日,我现在正坐在某编程机构的办公室电脑旁,写下这些文字,是啊,我已经退役将近两 ...

  6. 机器学习：详解什么是端到端的深度学习？（What is end-to-end deep learning?）

    什么是端到端的深度学习? 深度学习中最令人振奋的最新动态之一就是端到端深度学习的兴起,那么端到端学习到底是什么呢?简而言之,以前有一些数据处理系统或者学习系统,它们需要多个阶段的处理.那么端到端深度学 ...

  7. Java解压rar5兼容rar4

    RAR文件格式由WinRAR开发,广泛用于文件压缩和归档.随着技术的发展,RAR5作为更新的版本,引入了多项改进以提高压缩效率和数据安全性. 压缩效率:RAR5通过增大字典大小至32MB,相较于RAR ...

  8. HTML+JavaScript+CSS做一个界面

    下面是一个web界面主要是前端没有后端功能:关于JavaScript几种比较常见的样式   Javaweb(1),html <!DOCTYPE html> <html lang=&q ...

  9. 某宝购入牙膏厂U后其售后事宜的思虑

    近日某宝购入i7 9700k,    突然想去保修的问题(没有发票,要发票比京东自营贵200左右, 不要则便宜100左右),由于确实囊中幸亏所以还是选择了某宝,东西到手后突然想起这东西没票是否可以保修 ...

  10. 【转载】 Python Pillow 和 cv2 图片 resize 速度的比较

    原文地址: https://zhuanlan.zhihu.com/p/91078855 -------------------------------------------------------- ...