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

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

如：

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

赞 (0)

相关推荐

  • vue多种弹框的弹出形式的示例代码

    vue多种弹框的弹出形式的示例代码

    1.父组件引入子组件,子组件的加载问题 products.vue引入dlAddProd弹框(dlAddProd.vue),由于<div v-show="visible">,所以在products页面加载时,dlAddProd会被加载.但是el-dialog中的body部分不会被加载(不管有没有加v-if指令):dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框,但此时只有dlBlankAdd会被加载,dlEditProd不会被加载(<d

  • vue click.stop阻止点击事件继续传播的方法

    如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • 详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件

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

    在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe

  • layui当点击文本框时弹出选择框,显示选择内容的例子

    实现如图所示的功能 实现步骤: 1.html页面需要注意的内容 1). table <div id="hidden1" lay-filter="hidden1" style="display: none"> <table id="department_result" lay-filter="department_result"></table> </div>

  • 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia

  • 自定义toast外形,多次点击不会总是弹出toast的实现方法

    自定义toast外形,多次点击不会总是弹出toast的实现方法

    效果如下所示: 我封装了一个类出来: package com.amt.appstore.widgets; import com.amt.appstore.R; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.widget.TextView; import android.widget.Toast; public class Cu

  • js点击任意区域弹出层消失实现代码

    本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head

  • jquery实现点击弹出层效果的简单实例

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

  • 基于JS实现点击图片在弹出层显示大图效果

    基于JS实现点击图片在弹出层显示大图效果

    Javascript是个好东西. Jquery是基于这个好东西的一个强大的库. 今天要实现的功能是基于这两个玩意儿的. 点击图片,在弹出层显示原图. 大概效果是这样的: 上代码: 先是html部分: <div style="text-align:center;margin-top:200px;"> <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt=&quo

  • AlertBox 弹出层信息提示框效果实现步骤

    在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题. 此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新"包装",程序也改成组件的结构. 兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 http://demo.jb51.net/js/AlertBox/index.htm 程序说明 [实现原理] 弹出层的基本原理在仿Lightbox效果中已

  • jQuery中ztree 点击文本框弹出下拉框的实例代码

    废话不多说了,具体代码如下所示: <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/cs

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

随机推荐