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. mac电脑好用的工具总结

    制作gif:https://gfycat.com/gifbrewery 制作gif(超级好用,制作速度快,压缩图片小):https://www.cockos.com/licecap/ 解压工具:htt ...

  2. mac 安装mysql5.7.28附安装包

    mac 安装mysql教程 下载mysql安装包 百度云盘地址: https://pan.baidu.com/s/1qbF8vtON2sLzNetXCITnSQ 运行安装包 一直下一步即可 配置环境变 ...

  3. .NET开源、简单、实用的数据库文档生成工具

    前言 今天大姚给大家分享一款.NET开源(MIT License).免费.简单.实用的数据库文档(字典)生成工具,该工具支持CHM.Word.Excel.PDF.Html.XML.Markdown等多 ...

  4. oeasy教您玩转vim - 16 - # 行内贴靠

    行头行尾 回忆上节课内容 跳跃 向前跳跃是 f 向后跳跃是 F 继续 保持方向是 ; 改变方向是 , 可以加上 [count] 来加速 还有什么好玩的吗? 动手 #这次还是用无配置的方式启动 vi - ...

  5. markdown 的使用技巧

    1.项目目录层级结构 npm i tree-node-cli -g 全局安装 命令 -L 是确定要几级目录,-I是排除哪个文件夹下的,然后我是要在README里面生成项目结构树 先cd到需要生成目录的 ...

  6. Python 基于xml.etree.ElementTree实现XML对比

    测试环境 Python 3.6 Win10 代码实现 #!/usr/bin/env python 3.4.0 #-*- encoding:utf-8 -*- __author__ = 'shouke' ...

  7. 为什么我@Value中明明显示了值，他却是null

    今天尝试把一些重要东西写入application.yml里,结果在使用的时候发现value取不出来值原因有2个: 1.没有写@compent,没有把这个类交给spring管理 2.在service层n ...

  8. 【Mybatis-Plus】联表分页查询实现

    参考文章: https://blog.csdn.net/weixin_43847283/article/details/125822614 上上周写的SQL案例确实可以重构,所以搬到Demo里面测试看 ...

  9. 【Spring】04 注解实现自动装配

    1.使用注解实现自动装配 注解的基础源于JDK1.5的新特性 在Spring2.5开始支持了注解功能 如何使用? 1.导入约束 xmlns:context="http://www.sprin ...

  10. 【Web】实现页面自动刷新的功能

    技术发现自: https://www.bilibili.com/video/BV14v411b7JS?p=8 摘要自CSDN帖子: https://blog.csdn.net/senbar/artic ...