在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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
微信小程序实现原生步骤条
Jul 25 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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图片加中文水印实现代码分享
2012/10/31 PHP
PHP加密解密实例分析
2015/12/25 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
koa-router源码学习小结
2018/09/07 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
keras K.function获取某层的输出操作
2020/06/29 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
给医务人员表扬信
2014/01/12 职场文书
爱心活动计划书
2014/04/26 职场文书
红色旅游心得体会
2014/09/03 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
中学生思想品德评语
2014/12/31 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript