需求是这样的:

有四个视频,视频是在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. iOS - Base64转图片&&图片转Base64

    记录一个小功能 app传base64位上去,服务器拿到后转图片保存,当app请求拿回用户图片时,服务器再把图片转base64字符串返回给app,app再转图片 // 64base字符串转图片 - (U ...

  2. 5G能带来什么改变-从鸿蒙OS说起

    背景 从5G投票事件开始,开始关注5G.许多文章都说到5G的特点有速度快.时延低,其中,时延低是最重要的特点.然而,时延低能给社会带来什么改变呢? 2G是短信的时代,3G促成了语音视频,4G促成了短视 ...

  3. object-c 连接mysql

    1. 通读 'mysql的使用' 2. 在Target->build setting 修改配置 User Header Search Paths 加入 /usr/local/mysql/incl ...

  4. SQL+C#:一次多语言混合编程的经验总结

    1.用JAVA做,采取轮询策略: 2.用sql语言+C#混合编程,采取触发策略

  5. 【Python】单例模式

    单例 class MusicPlayer(object): instance = None def __new__(cls, *args, **kwargs): if cls.instance is ...

  6. linux后台运行、关闭、查看后台任务常用命令

    一.& 加在一个命令的最后,可以把这个命令放到后台执行,如: [root@bqh-01 ~]# watch -n 3 "sh 1.sh"  #每3s在后台执行一次1.sh脚 ...

  7. 【hadoop】hadoop3.2.0的安装并测试

    前言:前段时间将hadoop01的虚拟机弄的崩溃掉了,也没有备份,重新从hadoop02虚拟上克隆过来的,结果hadoop-eclipse插件一样的编译,居然用不起了,找了3天的原因,最后还是没有解决 ...

  8. python（open文件读取）

    一.open文件读取 1.open('file','mode')打开一个文件 file 要打开的文件名,需加路径(除非是在当前目录) mode 文件打开的模式 需要手动关闭close 2.with o ...

  9. 【转】TCP之深入浅出send和recv

    本篇我们用一个测试机上的阻塞socket实例来说明主题.文章中所有图都是在测试系统上现截取的. 需要理解的3个概念 1. TCP socket的buffer 每个TCP socket在内核中都有一个发 ...

  10. helm笔记

    一.注意事项 1.values.yaml   中可以使用'#'号注释行,而/templates 下的文件不能用#号,如果要注释可以使用 {{/*  context  */}} 2.{{-    #忽略 ...