在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 相关文章推荐
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
微信小程序入门教程
Nov 18 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
Vue.js watch监视属性知识点总结
Nov 11 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python读取注册表中值的方法
2013/04/08 Python
使用cx_freeze把python打包exe示例
2014/01/24 Python
python任务调度实例分析
2015/05/19 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python实现随机漫步功能
2018/07/09 Python
python实现简单加密解密机制
2019/03/19 Python
企划主管岗位职责
2013/12/12 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
五型班组建设方案
2014/02/10 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
公司营业员的自我评价
2014/03/04 职场文书
讲解员培训方案
2014/05/04 职场文书
促销活动总结怎么写
2014/06/25 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫