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. SpringBoot配置Jackson处理字段

    常用框架 阿里fastjson,谷歌gson等 JavaBean序列化为json 性能:Jackson>FastJson>Gson>lib 同个结构 Jackson.Fastjson ...

  2. Service Mesh Summit 回顾 | 轻舟服务网格的无侵入增强 Istio 经验

    在云原生社区近日主办的 Service Mesh Summit 2022 服务网格峰会上,网易数帆云原生技术专家方志恒分享了轻舟服务网格无侵入增强 Istio 的经验,本文据此次分享整理,介绍了对无侵 ...

  3. Java JVM——12. 垃圾回收理论概述

    1.前言 1.1 什么是垃圾? 在提到什么是垃圾之前,我们先看下面一张图: 从上图我们可以很明确的知道,Java 和 C++ 语言的区别,就在于垃圾收集技术和内存动态分配上,C++ 语言没有垃圾收集技 ...

  4. JMeter 逻辑控制之IF条件控制器

    逻辑控制之IF条件控制器 测试环境 JMeter-5.4.1 循环控制器介绍 添加While Controller 右键线程组->添加->逻辑控制器->While控制器 控制器面板介 ...

  5. JavaScript中的new map()和new set()使用详细（new map()和new set()的区别）

    简介:new Map(): 在JavaScript中,new Map()用于创建一个新的 Map 对象.Map 对象是一种键值对的集合,其中的键是唯一的,值可以重复.new Set(): 在JavaS ...

  6. LinuxUDP通讯

    目录 前言 一.UDP通讯 1.UDP通讯概述 2.UDP的特点 3.UDP的应用 二.UDP基本通讯 1.socket函数 2.bind函数 2.1 主机字节序和网络字节序 2.2 点分制十进制转换 ...

  7. 【Mybatis】09 日志工厂配置 & Log4J

    什么是日志 Log? 系统日志是记录系统中硬件.软件和系统问题的信息,同时还可以监视系统中发生的事件. 用户可以通过它来检查错误发生的原因,或者寻找受到攻击时攻击者留下的痕迹. 系统日志包括系统日志. ...

  8. 如何在Windows10电脑上打开3D建模STL文件

    相关: https://www.bilibili.com/video/BV1gD4y1h7tj/

  9. 中国版的huggingface——始智AI-wisemodel

    新闻: 始智AI-wisemodel社区正式上线,目标打造中国版"HuggingFace" 首先要知道,AI火热了7,8年了,不论是国内还是国外一直有要搞模型分享的网站,但是这东西 ...

  10. [POI2012] PRE-Prefixuffix 题解

    前言 题目链接:洛谷. 题意简述 给出长为 \(n\) 的串 \(\texttt{S}\).求最大的 \(l\) 满足: \[2l \leq n \land \texttt{S}[1 \ldots l ...