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


Posted in Javascript onSeptember 15, 2018

在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="">

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

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

如:

<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中实现点击选择框阻止弹出层消失的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
微信小程序开发背景图显示功能
Aug 08 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 #Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 #Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 #Javascript
You might like
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python异常处理例题整理
2019/07/07 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
Python 自由定制表格的实现示例
2020/03/20 Python
python学习笔记之多进程
2020/08/06 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
网络编辑岗位职责
2014/03/18 职场文书
员工年终自我评价
2014/09/14 职场文书
优秀员工事迹材料
2014/12/20 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL