antdv组件库事件冒泡

最新推荐文章于 2024-07-31 14:41:43 发布

iru

最新推荐文章于 2024-07-31 14:41:43 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_38800446/article/details/122557018

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在antdv组件库中，把折叠面板和上传控件一起使用，当点击上传按钮时，虽然会弹出文件选择窗口，但同时每次点击时折叠面板都会切换打开状态。

这是由于事件冒泡，当点击图标的时候穿透到了底下的折叠面板，所以两个事件响应都执行了

要解决这个问题，只需要在extra插槽的顶层标签加上@click.stop.prevent即可，示例如下

<div slot="extra" @click.stop.prevent>
  <a-upload
    name="file"
    :file-list="fileList"
    :multiple="true"
    :customRequest="customRequest"
    @change="handleFileChange"
  >
    <a-icon type="upload" >
    </a-icon>
  </a-upload>
</div>

如果其它组件遇到事件冒泡也是这样的一个处理过程。
参考链接：

vue事件修饰符

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iru

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽

高级前端工程师

07-25

2496

vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的

关于 and design vue select dropdownRender 加入 input 引发的问题 (已解决)

weixin_39804852的博客

10-21

1396

关于 Vue design select dropdownRender 加入 input 引发的问题 (已解决) 预期本来想达到的想过如图: 一番操作猛如虎… <a-select ref="selectInput" v-model:value="value" > <template #dropdownRender="{ menuNode: menu }"> <div ><a-input v-model:value="

参与评论您还未登录，请先登录后发表或查看评论

阻止checkbox组件及其他没有click事件的组件冒泡事件

花开富贵的博客

07-07

2943

由于框架的某些组件自身不带有click事件（如我最近使用到的iview里边的CheckBox、ant.design里边的CheckBox，发现没有click事件），因此很苦恼每次点击勾选框的时候他下边的标签就会很自觉地触发其他事件，需求是这样的：在折叠面板上放checkbox：结果每次点击的时候，都会触发面板的展开与关闭，我的解决方案就是：由于CheckBox没有click时间，为了点击...

antd阻止组件冒泡的一种方法

qq_44766377的博客

03-17

3636

在组件上加 .stop 是没用的可以在组件外边加上一个标签标签属性上 @click.stop就可以阻止冒泡事件了  <a slot="operation2" slot-scope="text" @click.stop> <a-switch default-checked @change="onChange" :defaultChecked='false' /> </a&...

阻止Antd的Upload组件事件冒泡

tbapman的博客

03-23

2938

背景在项目中遇到一个需求，+号上传文件，-号能去掉上传的文件，由于±号是包裹在Upload组件中的，导致点击-号也会触发文件上传解决方案只需要在-号上绑定一个事件，阻止冒泡即可 //此方法针对chrome有效，对其他浏览器未做兼容 <Icon type="minus" onClick={this.minus.bind(this)} /> minus = e => { ...

react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）

坚强的泡沫的博客

06-27

1815

react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）

【antd-design-vue】a-button 点击按钮置灰10秒后恢复

花椒和蕊的博客

10-11

4688

需求：点击按钮，按钮变成灰色，同时出现倒计时10秒，10秒后变回原来的按钮首先给按钮添加disabled属性，当绑的值为true的时候禁用再定义一个时间值 <a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag"> <span v-if="updateDisableFlag">上报({{settimer}}")</span&gt.

vue阻止事件冒泡(其他UI框架例如ant-design下的解决方案)

Tinkerbaby的博客

11-19

2676

vue中阻止事件冒泡通常只需要在click点击事件加上.stop就可以，像下面这样： <a @click.stop="handleEdit(row)">编辑</a> 这是因为： .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。关于vue中v-on指示符的更多用法我们可以参考官方文档，通过给绑定事件添加修饰符，可以实现例如“只在点击右键时触发”、“只在点击左键时触发”等等需求。但是我

antdv select下拉菜单自由扩展—添加输入框的使用问题

weixin_38122772的博客

02-23

6192

背景 antdv select 官方使用dropdownRender对下拉菜单进行自由扩展，为了解决点击 dropdownRender 里的内容浮层关闭的问题，官方建议添加preventDefault，但是这样扩展内容里的输入框无法聚焦一开始采取的方案是手动给自定义的输入框focus事件，但是基于页面只会有一个focus的原则，会因此触发select的输入框blur，反而导致下拉菜单收起，最后还是采取手动控制select的open属性来解决了问题解决思路在select上添加一个透明的div作为se

ant design vue 组件随页面滚动漂浮，已解决a-select a-input a-date-picker

qq_45530512的博客

09-08

3205

ant design vue 组件随页面滚动漂浮，已解决a-select a-input a-date-picker

【AngularJS】解决单击按钮事件中的冒泡现象

'Ablaze 的专栏

03-08

2236

解决方法是，当子节点元素触发单击事件后，就需要终止该事件的冒泡，终止的方法是调用事件本身的stopPropagation方法，即event.stopPropagation，该方法的功能是终止事件的传播，在事件的节点上调用事件后，不再将事件分派到其他节点上。

阻止事件冒泡 -- 在antd-mobile中，拦截点击picker后默认打开行为

daisymao0205的博客

07-30

1837

由于公司项目业务逻辑需求，需要在点击picker后判断数据是否为空，再决定是否打开picker；若接口响应数组为空，阻止picker打开。这里就需要用到jQuery的event.stopImmediatePropagation()方法（执行第一个事件处理程序，并阻止剩下的事件处理程序被执行）给picker外层DIV进行添加id属性 <div id='ID'> <Picker data={data} cols={1} {...g...

阻止 antd Popover弹框点击事件冒泡

风小猪的博客

04-11

2968

设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。

antd vue2.x popconfirm 气泡确认框阻止冒泡

最新发布

gaowxx的博客

07-31

283

2. popconfirm与图标的 disabled 一起用一个函数判断控制 true or false。1. 被包裹的 <i> 标签需要设置 @click.stop。

Ant-Design-Pro-V5 ：QueryFilter高级筛选组件、Table以及Pagination组件结合实现查询。

~~~

10-25

1167

Ant-Design-Pro-V5 ：QueryFilter高级筛选组件、Table以及Pagination组件结合实现查询。

AntD Vue中icon的使用

浪潮行舟_chenjin2136

02-17

1004

[antdv: Icon] Icon should have `type` prop or `component` prop or `children`

antdv4 Icon 的使用

weixin_40795574的博客

09-05

8036

antdv4 Icon 的使用正常使用，按需导入这个就不多说了，需要单独从@ant-design/icons导入，官方都是例子，例如 import { MenuUnfoldOutlined } from '@ant-design/icons'; <MenuUnfoldOutlined /> 类型可变，动态设置主要是想说一下提前不知道需要哪个图标，type 是存在后端或者配置文件中的使用场景，这个时候前端没办法知道需要导入哪些图标比如这样的场景，菜单栏的图表是路由表中配置的 route

(antD)vue项目使用图标

nyf_unknow的博客

06-08

779

【代码】(antD)vue项目使用图标。

阻止@change事件冒泡阻止el-checkbox冒泡

lyl_csdn_89的博客

04-16

3810

需求：el-checkbox中 @change事件要求阻止冒泡，如下代码中要求点击checkbox时不调用li标签的showPou方法 <li @click="showPou()"> <p> <el-checkbox @change="(val)=>handleCheckTower(val,item)" v-model="item.showCft" >测风塔</el-checkbox> </...

android 子组件 事件冒泡

05-23

在 Android 中，子组件的事件可以冒泡到其父组件。事件冒泡是指当子组件触发事件时，该事件会被传递到其父组件，直到事件被处理或者传递到顶层组件为止。 事件冒泡可以通过以下方式实现： 1. 在子组件中处理事件后，调用父组件的相应方法，将事件传递给父组件。 2. 在父组件中监听子组件的事件，并在事件被触发时进行相应的处理。例如，当一个按钮被点击时，该事件会由按钮组件处理，然后传递到其父组件，例如布局或活动。在父组件中，您可以根据需要对此事件进行进一步处理。需要注意的是，事件冒泡可能会导致性能问题，特别是在复杂的视图层次结构中。因此，建议在必要时使用事件冒泡，并尽可能减少事件冒泡的层数。