在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之解决IE下不渲染的bug
Jun 29 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
面试常见的js算法题
Mar 23 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP 远程关机实现代码
2009/11/10 PHP
php后门URL的防范
2013/11/12 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue实现分页栏效果
2019/06/28 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python网络编程实例简析
2014/09/26 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
单位法人授权委托书范本
2014/10/09 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
英文辞职信范文
2015/05/13 职场文书
毕业论文致谢信
2015/05/14 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL