在vue中实现点击选择框阻止弹出层消失的方法
更新时间：2018年09月15日 10:33:34 作者：luckylqh
今天小编就为大家分享一篇在vue中实现点击选择框阻止弹出层消失的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue项目中，选择性别是用的一个弹出层，
<div class="sex" v-show="showed" transition='fade' @click="unshow">
<ul @click.stop="stophidden">
<li class="choice">选择</li>
<li>
<label>男</label>
<input type="radio" name="sex" value="男">
</li>
<li>
<label>女</label>
<input type="radio" name="sex" value="女">
</li>
</ul>
</div>
已经给这个.sex层绑定了一个v-show条件，实现了点击显示隐藏的效果
但是因为这个效果是加在父级上，所以在选择性别的时候，也会关闭弹出层，这个问题其实是一个冒泡事件，要解决这个问题用vue的阻止冒泡的属性stop即可
<ul @click.stop="stophidden">
这个方法不写也可以，或者写成
<ul @click.stop="">
除了这个地方以外，还有一个弹出层，需要点击弹出层以外的地方关闭这个弹出层，如图：
如：
<div class="collect" @click="checktanchuceng">
<button @click="unshow">toggle</button>
<div class="tachuceng" v-show="showed">
</div>
</div>
<script>
export default {
data (){
return {
showed:false
}
},
methods:{
checktanchuceng (){
if(this.showed=true){
this.showed=false;
}
},
unshow(){
this.showed=!this.showed
}
}
}
</script>
这种情况下点击了按钮以后，弹出层不会显示，这是因为在父级上设置了checktanchuceng事件，冲突了，所以要给按钮加上阻止冒泡的方法，改成：
<button @click.stop="unshow">toggle</button>
以上这篇在vue中实现点击选择框阻止弹出层消失的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中的computed 和 vm.$data 原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在vue3中, 提供了一个 useAttrs 的方法它接收到的参数一 prop中可以接收到的数据是基本一样的如果我们想自已写一个组件, 把 elementPlus 中的期中一个组件封装一下,这篇文章主要介绍了vue3中的useAttrs和props的区别,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于vue3.0透传属性和事件使用的相关资料,透传attribute指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器,需要的朋友可以参考下2024-01-01
我们通常会用到脚手架vuecli创建项目,此时需要安装脚手架,下面这篇文章主要给大家介绍了关于vue脚手架安装以及安装失败问题的解决办法,需要的朋友可以参考下2022-07-07
这篇文章主要给大家介绍了关于使用vue进行Lodop打印的一些常用方法,需要进行打印功能,Lodop就是实现需求的插件,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要给大家总结介绍了关于vue中八种组件通信方式的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
本篇文章主要介绍了详解VueRouter进阶之导航钩子和路由元信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，它的作用是告诉访问者他们在网站中的位置以及如何返回，本文为大家介绍了实现面包屑导航的正确方式，需要的可以参考一下2023-06-06
这篇文章主要介绍了Vue中对组件二开解决思路以及方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
关于vue3+echart5 遇到的坑 Cannot read properties of undefine
这篇文章主要介绍了vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type'),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
最新评论