在vue项目中,选择性别是用的一个弹出层,
& lt; div类=靶浴眝-show=跋允尽惫?巴噬盄click=皍nshow”比;
& lt; ul @click.stop=皊tophidden”比;
& lt;李类="选择"在选择& lt;/li>
& lt; li>
& lt; label>男& lt;/label>
& lt;输入类型=肮悴ァ泵?=" https://www.yisu.com/zixun/男”比“性”价值;
& lt;/li>
& lt; li>
& lt; label>女& lt;/label>
& lt;输入类型=肮悴ァ眓ame=value=" https://www.yisu.com/zixun/女”比“性”;
& lt;/li>
& lt;/ul>
& lt;/div>
<强>已经给这个。性层绑定了一个v-show条件,实现了点击显示隐藏的效果
但是因为这个效果是加在父级上,所以在选择性别的时候,也会关闭弹出层,这个问题其实是一个冒泡事件,要解决这个问题用vue的阻止冒泡的属性停止即可
& lt; ul @click.stop=" stophidden "在
<强>这个方法不写也可以,或者写成
& lt; ul @click.stop=" "在
除了这个地方以外,还有一个弹出层,需要点击弹出层以外的地方关闭这个弹出层,如图:
<>强如:
& lt; div类="收集" @click=癱hecktanchuceng”比;
& lt;按钮@click=" unshow "祝辞toggle
& lt; div类=" tachuceng " v-show=跋允尽北?
& lt;/div>
& lt;/div>
& lt; script>
出口默认{
数据(){
返回{
显示:假
}
}，
方法:{
checktanchuceng () {
如果(this.showed=true) {
this.showed=false;
}
}，
unshow () {
this.showed=! this.showed
}
}
}
& lt;/script>
之前
这种情况下点击了按钮以后,弹出层不会显示,这是因为在父级上设置了checktanchuceng事件、冲突了,所以要给按钮加上阻止冒泡的方法,改成:
& lt;按钮@click.stop=" unshow "祝辞toggle
以上这篇在vue中实现点击选择框阻止弹出层消失的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
