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

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

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

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

  • 选择

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

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

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

     

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

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

      如:

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

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


      文章题目:在vue中实现点击选择框阻止弹出层消失的方法
      当前地址:http://csruizhi.cn/article/iicpjs.html

      其他资讯

      Copyright © 2007-2024 成都优众联杰科技有限公司 All Rights Reserved 蜀ICP备2024116266号
      友情链接: 成都网站建设 成都网站建设 成都企业网站制作 成都网站建设公司 企业网站设计 响应式网站设计 成都网站设计 网站制作 品牌网站建设 成都网站建设公司 成都网站建设 响应式网站设计方案 温江网站设计 成都品牌网站设计 达州网站设计 成都做网站建设公司 宜宾网站设计 网站制作 网站建设公司 成都网站制作 成都网站制作 成都商城网站建设