没有合适的资源?快使用搜索试试~ 我知道了~
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
4 下载量 60 浏览量
2020-12-29
20:16:41
上传
评论
收藏 65KB PDF 举报
温馨提示
试读
3页
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在; 实现如下 maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它 <div class=mask v-show=maskShow click=setMaskShow> </div> 有一个弹框它的显示和遮罩一样,里面有个关闭按钮也可以关闭
资源推荐
资源详情
资源评论
vue实现弹框遮罩点击其他区域弹框关闭及实现弹框遮罩点击其他区域弹框关闭及v-if与与v-show的区的区
别介绍别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技
巧既可以任意扩展。
v-if 是直接删除dom节点, 就是这个div就不存在了
v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在;
实现如下
maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它
<div class="mask" v-show="maskShow" @click="setMaskShow">
</div>
有一个弹框它的显示和遮罩一样,里面有个关闭按钮也可以关闭弹框,函数里只需要将maskShow值取反即可
<div class="child" v-show="maskShow">
<button @click="setMaskShow">关闭</button>
</div>
其他方法其他方法
点击时候触发该方法, 判断点的区域
hidePanel(event) {
let dom = document.getElementById("child");
if (dom) {
if (!dom.contains(event.target)) {
//这句是说如果我们点击到了id为child以外的区域
this.maskShow = false;
}
}
}
全部代码如下
<template>
<div class="father">
<div class="mask" v-show="maskShow" @click="setMaskShow"></div>
<div class="child" id="child" v-show="maskShow">
<button @click="setMaskShow">关闭</button>
</div>
<button @click="setMaskShow">click</button>
</div>
</template>
<script>
export default {
data: function(){
return {
maskShow: false,
}
},
methods: {
setMaskShow(){
this.maskShow = !this.maskShow;
}
}
}
</script>
<style>
.father{
width: 100%;
height: 100%;
}
资源评论
weixin_38571878
- 粉丝: 5
- 资源: 937
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功