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

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

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

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

  • 选择

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

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

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

     

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

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

      如:

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

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


      当前名称:在vue中实现点击选择框阻止弹出层消失的方法
      分享URL:http://bzwzjz.com/article/iicpjs.html

      其他资讯

      Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
      友情链接: 成都响应式网站建设 成都网站建设 成都网站制作 上市集团网站建设 成都网站建设 成都网站建设公司 重庆网站建设 企业手机网站建设 成都网站制作公司 成都网站建设 网站建设公司 手机网站制作 成都网站建设 响应式网站设计 成都做网站建设公司 成都网站制作 手机网站制作设计 外贸网站设计方案 重庆网站制作 手机网站制作 成都定制网站建设 手机网站建设