在vue中实现点击选择框阻止弹出层消失
来源:互联网 发布:鸡啄米 mfc编程入门 编辑:程序博客网 时间:2024/05/01 09:49
在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>
0 0
- 在vue中实现点击选择框阻止弹出层消失
- jQuery实现点击弹出层3秒后自动消失
- 点击input输入框弹出选择层
- js点击任意区域弹出层消失
- Andorid-----dialog弹出框 点击周围空白处弹出层不自动消失
- js鼠标点击弹出层点击其它地方消失
- jquery实现点击缩略图在弹出层显示原图功能
- jsp中点击图片在弹出层显示大图
- jsp中点击图片在弹出层显示大图
- 点击一个文本框,弹出一个层,点击层上的内容,文本框中内容显示层上的内容,层消失
- 点击一个文本框,弹出一个层,点击层上的内容,文本框中内容显示层上的内容,层消失2
- input内文字点击消失 弹出层,可以写表单
- 点击事件中实现弹出一个选择框(如选择网络设置、选择电话短信联系方式)
- 点击弹出层外的部分弹出层消失的几种写法
- 点击弹出层外的部分弹出层消失的写法
- Android实战(八)------点击空白可消失的弹出层dialog中显示动态高度宽度的gridview
- 弹出选择框的自动消失
- Vue下拉框点击选中,点击其他区域消失
- Windows下Android Studio点击运行,找不到夜神模拟器。
- 【转载】hibernate的各种保存方式的区别 (save,persist,update,saveOrUpdte,merge,flush,lock)等
- Java中伪造referer来获取数据
- MetaLink使用
- spring-春天的故事2
- 在vue中实现点击选择框阻止弹出层消失
- 自己开发zk directory browser
- android MVC与MVP总结,加MVP 实现步骤:
- Ubuntu安装PyCharm
- C语言接收消息乱码问题
- SIM PICS
- JAVA中的反射机制
- js实现网页验证码功能
- Myeclipse2016C3破解+文件下载