在vue中实现点击选择框阻止弹出层消失的方法
时间:2020-12-22 18:36:13|栏目: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 + UEditor 单图片跨域上传功能的实现方法
栏 目:vue
下一篇:vue实现扫码功能
本文地址:http://www.codeinn.net/misctech/35523.html