用了Element ui写页面

<el-dropdown-menu slot="dropdown">
<el-dropdown-item>

<el-select size="mini" v-model="searchInfo.plan" placeholder="请选择" >
<el-option v-for="(item,index) in plansItems" :key="index" :label="item.caption" :value="item.planId">
</el-option>
</el-select>

</el-dropdown-menu>

</el-dropdown-item>

情况出现：就是我在下拉菜单里放了选择框，在点选择框内容时会出现 下拉菜单收起。

正常情况：在选择框加一个vue自带的阻止冒泡事件 @click.stop

但是出乎我意料 这居然无效，加了和没加 一样的效果 然后我就去查阅资料

发现在选择框加一句 属性申明就可以了popper-append-to-body=“false” 或者：popper-append-to-body=“value” 然后再value的值=flase

最后解决了 我碰到的这个问题

vue之冒泡阻止的更多相关文章

  1. Js阻止冒泡，Vue中如何阻止冒泡事件

    js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop="& ...

  2. Vue的冒泡事件

    由于业务需求需要,需要在一个元素中的子元素添加一个点击事件. 但是刚好父元素也有一个点击事件.这个时候我们就需要使用到Vue中的阻止事件冒泡了.

  3. JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

    JavaScript中捕获/阻止捕获.冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...

  4. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  5. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  6. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  7. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  8. vue中click阻止事件冒泡，防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  9. 阻止vue事件冒泡的方法

随机推荐

  1. [LC] 92. Reverse Linked List II

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  2. EL表达式详细教程

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...

  3. Fence和非原子操作的ordering

    除了在原子操作中标记memory ordering外,还可以单独使用fence指定memory ordering.Fence是全局的操作,它影响所执行线程中其他原子操作的ordering. 12345 ...

  4. springboot oauth 鉴权之——授权码authorization_code鉴权

    近期一直在研究鉴权方面的各种案例,这几天有空,写一波总结及经验. 第一步:什么是 OAuth鉴权 OAuth2是工业标准的授权协议.OAuth2取代了在2006创建的原始OAuthTM协议所做的工作. ...

  5. SpringBoot 处理 POST Json 传参枚举

    在 Spring 框架中对枚举类型的序列化/反序列化是有限制的. 假设如下面这样在某些情况下就不能正常工作: 123456789 public enum PayChannelEnum implemen ...

  6. [PyTorch入门之60分钟入门闪击战]之入门

    深度学习60分钟入门 来源于这里. 本文目标: 在高层次上理解PyTorch的Tensor库和神经网络 训练一个小型的图形分类神经网络 本文示例运行在ipython中. 什么是PyTorch PyTo ...

  7. Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误

    最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...

  8. date成字符串

    //获取当前时间 Date date=new Date(); System.out.println("当前date: "+date); //将时间转化成yyyy-MM-dd格式的字 ...

  9. python 实现各种进度条

    1. 时间进度条 class Tiao(object): def __init__(self): self.obj1 = datetime.timedelta(seconds=1) self.var ...

  10. LeetCode--二叉树2--运用递归解决树的问题

    LeetCode--二叉树2--运用递归解决树的问题 在前面的章节中,我们已经介绍了如何利用递归求解树的遍历. 递归是解决树的相关问题最有效和最常用的方法之一. 我们知道,树可以以递归的方式定义为一个 ...