资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比广丰网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式广丰网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖广丰地区。费用合理售后完善,10余年实体公司更值得信赖。

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

  • 选择

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

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

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

     

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

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

      如:

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

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


      网页名称:在vue中实现点击选择框阻止弹出层消失的方法
      网站URL:http://www.cdkjz.cn/article/iicpjs.html
      多年建站经验

      多一份参考,总有益处

      联系快上网,免费获得专属《策划方案》及报价

      咨询相关问题或预约面谈,可以通过以下方式与我们联系

      大客户专线   成都:13518219792   座机:028-86922220