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: ;
}
.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来做的更多相关文章
- iOS 多个播放器同时播放，双击全屏，单击退出全屏
前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...
- VC一些经验系列：《平均绘画矩形图，双击全屏》
1.RGB宏报错 RGB宏是这样的, #define RGB(r,g,b) ((COLORREF)(((BYTE)(r)|((WORD)((BYTE)(g))<<8))| ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- C#中如何禁止WindowsMediaPlayer双击全屏显示
问题描述:在项目中使用WindowsMediaPlayer播放视频时,双击会出现视频全屏的效果,而且视频恢复后会暂停,除非再次双击返回后才能正常播放.那么如何禁止WindowsMediaPlayer的 ...
- div 自动全屏高度
最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%
- 解决ubuntu下firefox的flash全屏后不能恢复问题 ZT
sudo mkdir /etc/adobe echo "OverrideGPUValidation=true" >~/mms.cfg sudo mv ~/mms.cfg /e ...
- video 全屏，播放，隐藏控件。
requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscre ...
- QT中关于窗口全屏显示与退出全屏的实现
近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
随机推荐
- memcpy 速度测试
1. 小米8代i5 3840X2160X4 7.77ms 即34Gbps
- 【CF1095F】 Make It Connected（最小生成树）
题目链接 如果没有特殊边的话显然答案就是权值最小的点向其他所有点连边. 所以把特殊边和权值最小的点向其他点连的边丢一起跑最小生成树就行了. #include <cstdio> #inclu ...
- php操作表格（写)
一,转载:http://www.thinkphp.cn/extend/832.html 二,转载:http://m.blog.csdn.net/article/details?id=7827038
- springboot+security整合（2）自定义校验
说明 springboot 版本 2.0.3源码地址:点击跳转 系列 springboot+security 整合(1) springboot+security 整合(2) springboot+se ...
- DDL 操作数据库
DDL 操作数据库:常用的操作 CRUD 一.C(create)创建 1.创建数据库 create database 数据库名称; 2.创建数据库,判断是否存在,再创建(如果存在,就不再创建) cre ...
- [C#]DataTable转string[]
来源:https://zhidao.baidu.com/question/1754089856824824548.html string[] ary = Array.ConvertAll<Dat ...
- vscode编辑器中文乱码问题
设置配置自动格式化: "[javascriptreact]": { "editor.defaultFormatter": "esbenp.pretti ...
- p1.BTC-密码学的原理
所谓加密货币是不加密的,区块链上所有的交易内容(包括:账户的地址,转账的地址)都是公开的. Bitcoin中主要用到密码学的中的两个功能:Hash和签名. 一 Hash Cryptographic h ...
- k83 svc
一,deployment Deployment为Pod和Replica Set下一代Replication Controller)提供声明式更新 1,配置示例 apiVersion: apps/v1 ...
- 解决 spring boot 线程中使用@Autowired注入Bean的方法，报java.lang.NullPointerException异常
问题描述 在开发中,因某些业务逻辑执行时间太长,我们常使用线程来实现.常规服务实现类中,使用 @Autowired 来注入Bean,来调用其中的方法.但如果在线程类中使用@Autowired注入的Be ...