加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

在vue中实现点击选择框阻止弹出层消失的方法

发布时间:2020-12-16 23:34:21 所属栏目:百科 来源:网络整理
导读:p style="text-align: center" 在vue项目中,选择性别是用的一个弹出层, 男 女 已经给这个.sex层绑定了一个v-show条件,实现了点击显示隐藏的效果 但是因为这个效果是加在父级上,所以在选择性别的时候,也会关闭弹出层,这个问题其实是一个冒泡事件,要解

<p style="text-align: center">

在vue项目中,选择性别是用的一个弹出层,

  • 已经给这个.sex层绑定了一个v-show条件,实现了点击显示隐藏的效果

    但是因为这个效果是加在父级上,所以在选择性别的时候,也会关闭弹出层,这个问题其实是一个冒泡事件,要解决这个问题用vue的阻止冒泡的属性stop即可

    这个方法不写也可以,或者写成

    除了这个地方以外,还有一个弹出层,需要点击弹出层以外的地方关闭这个弹出层,如图:

    如:

    这种情况下点击了按钮以后,弹出层不会显示,这是因为在父级上设置了checktanchuceng事件,冲突了,所以要给按钮加上阻止冒泡的方法,改成:

    以上这篇在vue中实现点击选择框阻止弹出层消失的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读