宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-30

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

div class=' sex ' v-show=' show ' transition=' fade ' @ click=' unshow ' ul @ click。stop=' stop hidden ' Li class=' choice ' select/li li label男/Laberinput type=' radio ' name=' sex ' value='男'/Li Li label女/labe input type=' radio ' name=' sex ' value='女'/li /ul /div已将v-show条件绑定到此。性层,从而实现点击显示隐藏的效果。

但是,因为此效果被添加到父层,所以当选择性别时,弹出层也将关闭。这个问题实际上是一个冒泡事件。要解决这个问题,可以使用vue的反冒泡属性stop。

Ul @click.stop='stophidden '这个方法可以不写,也可以写成

Ul @click.stop=' '除了这个地方,还有一个弹出层,需要点击弹出层以外的地方关闭,如图:

例如:

div class=' collect ' @ click=' checktanchucheng ' button @ click=' unshow ' toggle/button div class=' tacchucheng ' v-show=' showed '/div script export default { data(){ return { showed : false } },methods : { checktanchucheng(){ if(this . showed=true){ this . showed=false;} },unshow(){ this.showed=!This.showed} }}/script在这种情况下,单击按钮后,弹出层将不会显示。这是因为checktanchuceng事件是在父级上设置的,这是冲突的。因此,有必要添加一种方法来防止按钮冒泡,并将其更改为:

按钮@点击。stop=' unshow ' toggle/button通过单击vue中的选择框来防止弹出层消失的上述方法是边肖与所有人共享的所有内容。希望能给大家一个参考,多支持我们。

更多资讯
游戏推荐
更多+