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. Maven Helper插件——实现一键Maven依赖冲突问题

    业余在一个SpringBoot项目集成Swagger2时,启动过程一直出现以下报错信息-- An attempt was made to call a method that does not exi ...

  2. 全网最适合入门的面向对象编程教程：05 类和对象的Python实现-PyCharm代码标签（一个帮你提升coding效率的小技巧）

    摘要: 本文介绍了PyCharm IDE中代码标签的定义.类型和使用方法. 往期推荐: 学嵌入式的你,还不会面向对象??! 全网最适合入门的面向对象编程教程:00 面向对象设计方法导论 全网最适合入门 ...

  3. windows内置账户

    参考文献: http://www.cnblogs.com/xianspace/archive/2009/04/05/1429835.html 转载自: https://www.cnblogs.com/ ...

  4. Django DRF @action 装饰器

    @action 装饰器在Django REST Framework (DRF) 中非常有用,它可以帮助你在ViewSet中创建自定义的动作,而不仅仅是依赖标准的CRUD操作(Create, Read, ...

  5. c++ 异常记录

    vector的排序使用的iterator必须先+1 再-1,否则报溢出警告,不能正确排序遍历map获取到的是对象副本,需要引用,不能直接拿来做引用 fortmat只支持原始类型,wstring,str ...

  6. TCP和KCP协议

    TCP协议 KCP是一个快速可靠协议,能以比 TCP 浪费 10%-20% 的带宽的代价,换取平均延迟降低 30%-40%,且最大延迟降低三倍的传输效果.纯算法实现,并不负责底层协议(如UDP)的收发 ...

  7. nginx实现 springboot项目的负载均衡 策略

    weight 代表权重,默认为1,权重越高被分配的客户端越多 指定轮询几率,weight和访问比率成正比,用于后端服务器性能不均的情况. 例如 # 反向代理配置upstream server_list ...

  8. .NET8 Blazor 从入门到精通：（一）关键概念

    目录 Blazor 的关键概念 项目模板 Razor 语法 依赖注入 注入配置 HeadOutlet 组件 @code 分离 Blazor 调试 CSS 隔离 调用JavaScript 最近在学习 B ...

  9. 【Java】Oshi 硬件信息读取库

    实现的功能: 用于开发服务器监控面板,获取服务器硬件参数 官方Github仓库地址: https://github.com/oshi/oshi Maven坐标: <!-- https://mvn ...

  10. 【C3】01 概述

    CSS (层叠样式表) 让你可以创建好看的网页,但是它具体是怎么工作的呢? 这篇文章通过一些很简单的例子,告诉我们什么是 CSS, 同时还会涉及一些和 CSS 相关的专业术语. 预备知识: 基本的计算 ...