div双击全屏,再双击恢复到原来的状态vue,js来做

需求是这样的:
有四个视频,视频是在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: 0;
        }
        .getHello{
            width:400px;
            height: 400px;
            background-color: skyblue;  
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        ul{
            width: 1000px;
            height: 660px;       
        }
        li{
            width: 50%;
            height: 50%;
            float: left;
            list-style: none;
            background: skyblue;
            box-sizing: border-box;
            border: 1px solid red
        }
        .clearfix::after{
            content: '';
            height: 0;
            line-height: 0;
            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">111</li>
             <li ref="fenpin"  @dblclick="dbClick2($event)" :style="{width:width2,height:height2}" v-if="two2">222</li>
             <li ref="fenpin"  @dblclick="dbClick3($event)" :style="{width:width3,height:height3}"  v-if="three2">333 </li>
             <li ref="fenpin"  @dblclick="dbClick4($event)" :style="{width:width4,height:height4}"  v-if="four2">444</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(22)
                        this.width="100%"
                        this.height="100vh"
                    }else{
                        this.width="400px"
                        this.height="400px"
                    }
                   
                },
                bopy:function(ev){
                    console.log(8888,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>
posted on 2018-05-14 11:23 周小姐你好阅读(3388) 评论(0) 编辑收藏举报