if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。
v-if 是直接删除dom节点, 就是这个div就不存在了
v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在;
实现如下
maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它
有一个弹框它的显示和遮罩一样,里面有个关闭按钮也可以关闭弹框,函数里只需要将maskShow值取反即可
关闭
其他方法
点击时候触发该方法, 判断点的区域
hidePanel(event) {
let dom = document.getElementById("child");
if (dom) {
if (!dom.contains(event.target)) {
//这句是说如果我们点击到了id为child以外的区域
this.maskShow = false;
}
}
}
全部代码如下
关闭
click
export default {
data: function(){
return {
maskShow: false,
}
},
methods: {
setMaskShow(){
this.maskShow = !this.maskShow;
}
}
}
.father{
width: 100%;
height: 100%;
}
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.3;
}
button{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
}
.child{
position: fixed;
width: 400px;
height: 400px;
border: 1px solid #ccc;
text-align: center;
line-height: 400px;
top: calc(50% - 200px);
left: calc(50% - 200px);
background: #fff;
}
下面谈谈 Vue.js 里 v-if 与 v-show 的区别
在 Vue 项目中,v-if 和 v-show 算是两个用得很频繁的指令,很巧的是它俩在表现上也相似,都是动态显示 DOM 元素。不过既然是两个不同指令,肯定会有不同的适用场景,带着好奇,让我们在 Vue 官方文档里一探究竟吧~
对于v-if大家应该不会陌生,不管哪种编程语言都会有 if-else 的流程控制。
例如,在 Java 中:
if (condition) {
//some code here
} else {
//some code here, too
}
当然在 Vue.js 中,v-if 也是执行这样的功能。稍有不同的是在 template 中用 v-if 条件渲染一整组,类似地,同时也可使用 v-else 指令来表示 v-if 的 “else块”:
Now you see me
Now you don't
另一个用于根据条件展示元素的选项是 v-show 指令,用法大致一样:
Hello!
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display 属性。
看到这里大家应该对 v-if 与 v-show 的区别有一个简单的概念了。
接下来将会为大家详细介绍两者的不同:
v-if 是”真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
同时 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
所以一般来说,v-if 具有更高的切换开销,而 v-show 具有更高的初始渲染开销。
因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 更好。
总结
以上所述是小编给大家介绍的vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍相关推荐
- if vue 跳出_vue使用v-if v-show 页面闪烁
最近在写组件时遇到一个问题,视图需要根据接口返回的数据频繁的切换状态又使用v-if时候加载出来的试图时闪烁 我们来看一下 v-if 和 v-show 的区别和优先级 v-if 和 v-show 的区别 ...
- layer弹出层内点击确认提交数据并关闭弹出层
$.ajax({url: "json/DeductScore.ashx",type: 'post',async: false, //使用同步的方式,true为异步方式data: { ...
- html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法 首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现 你好我是弹窗里面的内容部分 所触发的事件如下: ...
- html php单选框,html单选框选中状态 html 怎么设置单选框的样式
Photoshop中 hard round,airbrush pen opacity fl硬圆 喷枪软圆 希望喜欢, 用php怎么检查html中的单选框是否被选中 html中单选按钮控件标签用法解析及 ...
- vue 点击弹出文字_vue实现点击出现操作弹出框的示例
如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里 ...
- uniapp vue nvue 模态框遮罩
uniapp vue nvue 模态框遮罩 以前 纯 Vue 开发的时候:模态框遮罩就是这么写的 .popBack{position: fixed;top: 0;left: 0;z-index: ...
- java弹窗 触发事件_关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
最新文章
- 转载知乎上的一篇:“ 面向对象编程的弊端是什么?”
- 云服务器建站 - Node Nginx MySQL
- hdu 2196(树的最长链)
- JAVA入门级教学之(布尔型数据类型)
- linux打包cpio命令例子,linux压缩命令——tar、cpio详解
- Stateflow中的真值表注意事项
- 【imessage软件群推送】 “CMCC“ | grep password #待补充 重置后撤销暂存的变更
- 计算机编码器的工作原理,优先级编码器74LS148的电路结构、工作原理及使用方法...
- ARCHPR(压缩密码暴力破解软件)
- 最小生生树算法-prim/kruskal
- html5 黑色圆圈,html5使用canvas画空心圆与实心圆_html5教程技巧
- 前端工程师简历怎么写
- 吃妖怪的萝莉和帅气道长大叔,古风治愈漫画温暖来袭!
- google与百度地图api体验笔记
- win7连接远程桌面时出现黑屏的解决方法(亲测有效)——终于找到解决办法了
- c语言编辑三色球问题,C语言实例编程:三色球问题
- 莱西姆大学计算机专业,菲律宾的大学排名是根据什么指标排的
- python函数ppt_如何用 Python 让你的PPT数据动起来
- kettle carte repository 资源库 useSSL=false warning 警告
- 微信多开软件苹果版_快手充值快币微信充值苹果版;