需求是这样的:

有四个视频,视频是在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. 74.js---移动端文章的瀑布流的实现。

    移动端文章的瀑布流的实现.   1.首先在前端html页面已经通过PHP代码循环完全数据.  2.然后在js先全部隐藏,通过判断滑动到底部,每次加载一部分数据,直到数据全部显示完全. js代码: // ...

  2. Springboot项目统一异常处理

    Springboot项目统一异常处理 一.接口返回值封装 1. 定义Result对象,作为通用返回结果封装 2. 定义CodeMsg对象,作为通用状态码和消息封装 二.定义全局异常类 三.定义异常处理 ...

  3. npm 安装卸载模块 & ionic插件安装与卸载

    npm安装模块 npm install xxx利用 npm 安装xxx模块到当前命令行所在目录 npm install -g xxx利用npm安装全局模块xxx 本地安装时将模块写入package.j ...

  4. js 字节操作

    获取byte的高4位bit和低4位bit function getHeight4(ata){//获取高四位 int height; height = ((data & 0xf0) >&g ...

  5. [AIR] NativeExtension在IOS下的开发实例 --- 新建项目测试ANE(四)

    来源:http://bbs.9ria.com/thread-102043-1-1.html 通过前面的努力,好了,我们终于得到了一个ANE文件了.下面我们开始新建一个Flex Mobile项目做一下测 ...

  6. UNTIY Canvas

    一.Canvas 组件 Render Mode(渲染模式) (1)Screen Space-Overlay:2D UI,始终显示在屏幕最前方,适合制作HP,MP等(相当于GUI) (2)Screen ...

  7. iview carousel 图片不显示；iview 轮播图 图片无法显示（转载）

    转载来源:https://segmentfault.com/q/1010000016778108 相关代码 <Carousel autoplay v-model="value2&quo ...

  8. 学习python的日常7

    ---恢复内容开始--- 正则表达式: 在正则表达式中,用\d可以匹配一个数字,\w可以匹配一个字母或数字,'.'可以匹配任意字符,用*表示任意个字符,用+表示至少一个字符,用?表示0个货一个字符,用 ...

  9. jenkins安装和简单部署

    jenkins安装和简单部署 jenkins历史 jenkins是一款非常好用的团队CI(Continuous Integration)工具.它可以使你的构建,集成,发布,开发流程自动化.减轻各个环节 ...

  10. 【Flask】 python学习第一章 - 2.0 视图方式和返回值

    路由参数与请求方式制定   ALT+回车 pycharm 快速导包  demo3  指定访问地址  与请求方式  #   给路由传入参数 使用尖括号 ,视图函数需要接收参数 @app.route(&q ...