在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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
使用layui实现树形结构的方法
Sep 20 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php实现的用户查询类实例
2015/06/18 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
详解python中docx库的安装过程
2019/11/08 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
网络专业学生个人的自我评价
2013/12/16 职场文书
高中美术教学反思
2014/01/19 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
公司开业庆典主持词
2014/03/21 职场文书