需求是这样的:

有四个视频,视频是在4个区域,点击之后就全屏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .fade-enter-active, .fade-leave-active {

           transition: opacity .5s;

        }

        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

          opacity: ;

        }

        .getHello{

            width:400px;

            height: 400px;

            background-color: skyblue;

        }

        body,html{

            width: %;

            height: %;

        }

        ul{

            width: 1000px;

            height: 660px;

        }

        li{

            width: %;

            height: %;

            float: left;

            list-style: none;

            background: skyblue;

            box-sizing: border-box;

            border: 1px solid red

        }

        .clearfix::after{

            content: '';

            height: ;

            line-height: ;

            display: block;

            clear: both;

            visibility: hidden;

        }

    </style>

</head>

<body>

    <!--mvvm里面的v-->

    <div id="demo">

    <button v-on:click="show = !show" >

        Toggle

    </button>

    <transition name="fade">

         <ul class="clearfix">

            <!--<li ref="fenpin" v-for="item in items" :key="item.id" @dblclick="dbClick($event)"></li>-->

             <li ref="fenpin"  @dblclick="dbClick1($event)" :style="{width:width1,height:height1}" v-if="one2"></li>

             <li ref="fenpin"  @dblclick="dbClick2($event)" :style="{width:width2,height:height2}" v-if="two2"></li>

             <li ref="fenpin"  @dblclick="dbClick3($event)" :style="{width:width3,height:height3}"  v-if="three2"> </li>

             <li ref="fenpin"  @dblclick="dbClick4($event)" :style="{width:width4,height:height4}"  v-if="four2"></li>

        </ul>

        <!--<p v-if="show" class="getHello" v-on:dblclick="Open()" ref="good" :style="{width:width,height:height}" @keydown="bopy($event)">hello</p>-->

    </transition>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        // window.onload=function(){

         window.onload = function () {

         var vm=new Vue({

            el: '#demo',

            data: {

                show: true,

                width1:"50%",

                height1:"50%",

                width2:"50%",

                height2:"50%",

                 width3:"50%",

                height3:"50%",

                 width4:"50%",

                height4:"50%",

                items:{

                    key1:'one',

                    key2:'two',

                    key3:'three',

                    key4:'four',

                },

                one2:true,

                two2:true,

                three2:true,

                four2:true,

            },

            methods: {

                Open: function () {

                    if(this.width=="400px"){

                         console.log()

                        this.width="100%"

                        this.height="100vh"

                    }else{

                        this.width="400px"

                        this.height="400px"

                    }

                },

                bopy:function(ev){

                    console.log(,ev)

                },

                dbClick1:function (e){

                    console.log(e.target);

                    if(this.width1=="50%"){

                        this.two2=false;

                        this.three2=false;

                        this.four2=false;

                        this.width1="100%";

                        this.height1="100%";

                    }else{

                        this.two2=true;

                        this.three2=true;

                        this.four2=true;

                        this.width1="50%";

                        this.height1="50%";

                    }

                },

                dbClick2:function (e){

                    if(this.width2=="50%"){

                        this.one2=false;

                        this.three2=false;

                        this.four2=false;

                        this.width2="100%";

                        this.height2="100%";

                    }else{

                        this.one2=true;

                        this.three2=true;

                        this.four2=true;

                        this.width2="50%";

                        this.height2="50%";

                    }

                },

                dbClick3:function (e){

                    if(this.width3=="50%"){

                        this.one2=false;

                        this.two2=false;

                        this.four2=false;

                        this.width3="100%";

                        this.height3="100%";

                    }else{

                        this.two2=true;

                        this.one2=true;

                        this.four2=true;

                        this.width3="50%";

                        this.height3="50%";

                    }

                },

                dbClick4:function (e){

                    if(this.width4=="50%"){

                        this.one2=false;

                        this.two2=false;

                        this.three2=false;

                        this.width4="100%";

                        this.height4="100%";

                    }else{

                        this.two2=true;

                        this.one2=true;

                        this.three2=true;

                        this.width4="50%";

                        this.height4="50%";

                    }

                },

           },

         })

        }

    </script>

</body>

</html>

div双击全屏,再双击恢复到原来的状态vue,js来做的更多相关文章

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

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

  2. VC一些经验系列：《平均绘画矩形图，双击全屏》

    1.RGB宏报错 RGB宏是这样的, #define RGB(r,g,b)          ((COLORREF)(((BYTE)(r)|((WORD)((BYTE)(g))<<8))| ...

  3. div的全屏与退出全屏

    div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...

  4. C#中如何禁止WindowsMediaPlayer双击全屏显示

    问题描述:在项目中使用WindowsMediaPlayer播放视频时,双击会出现视频全屏的效果,而且视频恢复后会暂停,除非再次双击返回后才能正常播放.那么如何禁止WindowsMediaPlayer的 ...

  5. div 自动全屏高度

    最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%

  6. 解决ubuntu下firefox的flash全屏后不能恢复问题 ZT

    sudo mkdir /etc/adobe echo "OverrideGPUValidation=true" >~/mms.cfg sudo mv ~/mms.cfg /e ...

  7. video 全屏，播放，隐藏控件。

    requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscre ...

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

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

  9. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

随机推荐

  1. Git提交代码解决方案

    最近做项目不再用小乌龟了,开始用git,便做了记录如下,后期可以看看自己是怎么使用的   下载安装就不说了,直接进入使用环节.   1.使用规则 git pull origin master 和 gi ...

  2. Java知识回顾 （11） 异常处理

    距离最近的 Java知识回顾系列(10),2019.4.24日,到现在,已经近半年过去了. 感觉,做一件事情,如果有头无尾,实在不好,心里会一直悬着.所以,现在继续上面的内容. 再次声明,正如(1)中 ...

  3. Oracle 子查询（复杂select语句）

    在执行数据操作时,如果某个操作需要依赖于另外一个 select语句的查询结果,那么就可以把 select 语句迁入到该操作语句中,这样就形成了一个子查询.实际应用中,表与表之间相互关联,相互依存,这样 ...

  4. 解决Vivado XSDK在Ubuntu系统上自带UART Terminal Crash问题

    在Ubuntu 18.04 LTS系统上使用某些版本的Vivado XSDK的Eclipse IDE中自带的串口Terminal会有Crash的问题.Xilinx的XSDK的Terminal插件是用的 ...

  5. Qt ListWidget item 发起拖放

    第一步:重写类 MyListWidget 继承自 QListWidget 第二步:重写 mousePressEvent 函数 和 mouseMoveEvent 函数 void mousePressEv ...

  6. iOS ANE植入流程

    来源:http://www.adsmogo.com/help/iosANE 一.iOS ANE植入流程 Step 1:创建Flex工程 1.1 启动Flash Builder 4.6.0, 选择“Fi ...

  7. IDEA中导入Maven模块

    IDEA中导入Maven模块方式有二种: 1)批量添加,不可添加文件夹 2)单个添加,可添加任意文件

  8. PyCharm-安装&调试

    windows安装pycharm 和python的链接: PyCharm:http://www.jetbrains.com/pycharm/ Python:https://www.python.org ...

  9. java 图片base64互转

    public class ImgBase64 { public static void main(String[] args) //测试 { String strImg = GetImageStr() ...

  10. git config user.name

    Setting your username in Git Git uses a username to associate commits with an identity. The Git user ...