需求是这样的:

有四个视频,视频是在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. vue动态加载图片

    如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...

  2. PHP/Python---百钱百鸡简单实现及优化

    公鸡5块钱一只,母鸡3块钱一只,小鸡一块钱3只,用100块钱买一百只鸡,问公鸡,母鸡,小鸡各要买多少只? 今天看到这题很简单 ,但是随手写出来后发现不是最优的

  3. sublime的package control的中文镜像

    参加: http://packagecontrol.cn/installation

  4. 用c#监控网络流量

    using System; using System.Text; using System.Net; using System.Net.Sockets; using System.Runtime.In ...

  5. MySQL关闭缓慢

    Pre环境有个MySQL不能进行数据写入操作,关闭实例也非常慢,最后error报错. 最后发现是磁盘不能进行写操作. touch /data/testtouch: cannot touch ‘/dat ...

  6. nginx_status

    server { listen ; server_name blog.oldboy.com; root /code/wordpress; index index.php index.html; loc ...

  7. IDRAC 固件升级操：

    Internal Use - Confidential IDRAC 固件升级操作: R630:https://downloads.dell.com/FOLDER05590166M/1/iDRAC-wi ...

  8. k8s删除pod时，docker服务出现挂载点泄漏问题的解决

    k8s更新版本后,老的POD一直出现Terminating,多久都不能删除. 然后,进入具体的节点机器之后,查看日志输出如下类似: ERROR: driver "overlay" ...

  9. P2055 [ZJOI2009]假期的宿舍[二分图匹配]

    题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题. 比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C 与 A 不认识 ...

  10. 如何通过cmd获取到域名下的ip地址?例如获取百度的域名

    百度首页的IP地址为[119.75.217.109] 你可以通过电脑本机进行查询,查询步骤如下: 1.点击[开始]--->>[运行],输入[cmd]: 按键盘上的[Win键]+[R键],调 ...