需求是这样的:

有四个视频,视频是在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. Switch开关在element-ui表格中点击没有效果解决方法

    <el-table-column label="三审" align="center"> <template slot-scope=" ...

  2. linux时间格式

    date "+%Y-%m-%d %H:%M:%S" 2019-10-27 12:02:33

  3. python代码工具小结

    目录: 1.with读.写文件 (1)with读文件 (2)with写文件 2.requests爬虫 (1)get请求 (2)post请求 1.with读.写文件 (1)with读文件 (2)with ...

  4. jeecg的开发api接口之旅（http）

    一.接口测试工具 1.postman下载地址:https://download.csdn.net/download/qq_35792159/11898005 2.谷歌浏览器插件:https://www ...

  5. bcb中TParamter传NULL值

    if (status_Desc.IsEmpty()) Queue_Status->Value = Null(); else Queue_Status->Value = status_Des ...

  6. DevExpress中实现GridControl的分页功能

    DevExpress中如何实现GridControl的分页功能 简介:DevExpress中如何实现GridControl的分页功能, 主要是利用DataNavigator和GridControl组合 ...

  7. 解决jdbc向数据库存入数据出现乱码的情况

    解决办法 1.修改项目的编码,建议统一使用utf-8来实现,这样整个项目就是utf-8. 2.jdbc:mysql://locathost:3306/数据库名称?useUnicode=true& ...

  8. Mongodb设置用户权限（整理版）

    本文是基于windows 下 MongoDB 4.0编写,据了解MongoDB在3.0以后的版本中权限设置有变化. 1. 创建超级用户 安装完之后,打开命令行,进入mongodb安装目录,在bin目录 ...

  9. *JavaScript标准参考教程 - 阮一峰

    参考 页向对象编程的模式(继承&模块化)

  10. 本地仓库推送到远程仓库：fatal: refusing to merge unrelated histories

    最近,在操作git的时候,遇到各种问题,下面总结一下. 最开始,我不是先把远程仓库拉取到本地 ,而是直接在本地先创建一个仓库,再git remote add添加远程仓库. 当然,gitee官方还是有操 ...