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. java面试一日一题：在创建微服务时，是用RPC还是http

    问题:请讲下在做微服务时,是使用RPC还是http 分析:该问题主要考察对RCP及http的理解,也关系到在进行微服务选型时的两大方向,dubbo和springCloud,都是RPC框架,但前者是RP ...

  2. WordPress基础之菜单导航栏设置

    菜单是WordPress的一项重要功能,方便用户快速打开网站页面,我们通常说的网站导航栏就是菜单.菜单通常显示在网站的顶部或者底部,以Apple官网的为例: 这篇文章我们就学习下:如何添加.删除菜单: ...

  3. python os.path 模块详解

    python os.path 模块详解 os.path.basename() 返回最后一项,通常是文件名os.path.dirname() 返回的是目录,不包含文件名os.path.split() 返 ...

  4. Python获取指定网段正在使用的IP

    Python获取指定网段正在使用的IP #!/usr/bin/env python # -*- coding: utf-8 -*- ''''' 使用方法样例 python test20.py 192. ...

  5. 【AI模型】PPT生成

    一.天工AI https://www.tiangong.cn/ 先对话进行提纲生成,然后可以编辑提纲,再进行PPT生成 生成完毕后,可以直接点击导出下载 二.星火讯飞 讯飞智文 生成的PPT相比天工的 ...

  6. 【VMware】 桥接网路发现无法Ping通原因

    解决方案参考: https://blog.csdn.net/weixin_33856370/article/details/92420910 设置好的同网段的三台虚拟机这次开机连不上网了 仔细发现VM ...

  7. 【RabbitMQ】12 日志监控 & 消息追踪

    一.日志和监控 RabbitMQ日志存放目录 [root@localhost ~]# ll /var/log/rabbitmq/ 总用量 176 -rw-r-----. 1 rabbitmq rabb ...

  8. 【SpringMVC】05 RestFul风格

    什么是RestFul风格? 一个资源定位和资源操作的风格,不是标准,也不是协议, 基于此风格的路径访问可以隐藏真实的参数传递,以提高网站的安全访问 以往的请求参数: jdbc:mysql://loca ...

  9. 【Shiro】08 SpringBoot整合

    需要的依赖的坐标: <!-- Shiro依赖 --> <dependency> <groupId>com.github.theborakompanioni</ ...

  10. python 中 ctypes 的使用尝试

    最近在看Python的性能优化方面的文章,突然想起ctypes这个模块,对于这个模块一直不是很理解,不过再次看完相关资料有了些新的观点. ctypes 这个模块个人观点就是提供一个Python类型与C ...