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

已于 2022-03-18 09:34:03 修改
阅读量3.4k 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js elementui sass
于 2022-03-17 15:19:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44766377/article/details/123551380
版权
本文介绍了如何在Vue组件中使用@click.stop修饰符来阻止事件冒泡，以确保组件内的开关切换不会影响到外部的点击事件处理。示例代码展示了在a-switch组件外添加标签并设置@click.stop的方法。
摘要由CSDN通过智能技术生成

在组件上加 .stop 是没用的

可以在组件外边加上一个标签 标签属性上

@click.stop 就可以阻止冒泡事件了

<!--      是否选中-->
      <a slot="operation2" slot-scope="text" @click.stop>
        <a-switch default-checked @change="onChange" :defaultChecked='false' />
      </a>

晓峰666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 组件防止冒泡方法
Constantiny的博客
08-12 1140
在使用 antd 组件库开发时，发现点击一个子组件，却触发了父组件的点击事件，比如，我在一个折叠面板里面放入一个下拉框或者对下拉框列表渲染做定制，每个下拉框候选项都有一个子组件…其实这就是 Javascript 的冒泡机制。
阻止事件冒泡 -- 在antd-mobile中，拦截点击picker后默认打开行为
daisymao0205的博客
07-30 1776
由于公司项目业务逻辑需求，需要在点击picker后判断数据是否为空，再决定是否打开picker；若接口响应数组为空，阻止picker打开。 这里就需要用到jQuery的event.stopImmediatePropagation()方法（执行第一个事件处理程序，并阻止剩下的事件处理程序被执行） 给picker外层DIV进行添加id属性 <div id='ID'> <Picker data={data} cols={1} {...g...
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
坚强的泡沫的博客
06-27 1629
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
react中antd-mobile的组件如Switch阻止冒泡的方法
关中刀客在青岛
12-25 1491
需求 一个卡片，点击跳转 卡片上有个切换开关Switch，点击时需要阻止卡片跳转的动作 问题 Switch的api里只有onChange事件，参数里没有react或原生事件参数 解决方案 在Switch外面包一层div，在这个div上使用react事件的阻止方法：onClick={e=>e.stopPropagation()} <div className='r' onClick={e=>e.stopPropagation()}> <Switch che
小程序使用弹窗组件Modal，阻止冒泡事件
JessicaLi的博客
04-20 440
在modal组件上加一个catchtap事件（里面不写内容都可以），亲测有效！ <i-modal title="提示" visible="{{ visible }}" catchtap="stopPropagation" bind:ok="call" bind:cancel="handleClose" ok-text="是" cancel-text="否"> <view>是否拨打电话xxxxxxxxxxx？</view> </i-modal>
阻止 antd Popover弹框 点击事件冒泡
风小猪的博客
04-11 2578
设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样调用，就可以了 补充知识：Ant Design Pro，用setFieldsValue方法，...
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
antd组件Upload实现自己上传的实现示例
10-17
在本文中，我们将深入探讨如何使用Ant Design（antd）组件库中的`Upload`组件来实现自定义上传功能。Ant Design是一个流行的React UI框架，提供了一系列美观且实用的组件，其中包括`Upload`，用于处理文件上传操作。...
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
antd picker组件 全国省市县数据
09-18
最新的全国省市县数据 数据格式[{ "label": "北京市", "value": "110000", "children": [{ "label": "北京市", "value": "110100", "children": [{ "label": "东城区", "value": "110101", ...}]
基于antd4二次封装的form组件
12-31
在React开发中，Ant Design（简称antd）是一个广泛使用的组件库，它提供了丰富的UI组件，大大简化了前端开发过程。本话题聚焦于“基于antd4二次封装的form组件”，这通常意味着开发者为了满足特定项目需求，对antd...
from-antd-datepicker:包装antd日期组件
05-06
npm install --save from-antd-datepicker 用法 import * as React from "react" ; import SingleDatePicker , { RangePicker } from "from-antd-datepicker" ; class Example extends React . Component { render ...
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
01-22
DatePicker外面套一层div，然后阻止冒泡 补充知识：antd 的 RangePicker 中日期选择近三月 今天遇到一个问题，日期插件中只能选择近三个月。代码如下： 属性中 disabledDate 就是日期禁止选择。 1、当前天之前 2...
react配合antd组件实现的管理系统示例代码
08-27
一、使用 React 和 Antd 实现管理系统 * 使用 create-react-app 脚手架创建 React 项目 * 配合 Antd 组件库实现管理系统的 UI 组件 * 使用 Redux 进行状态管理 二、按需加载组件 * 使用 Webpack 的 import 函数...
【Antd】实现Table组件行点击，解决某一列不触发行点击
最新发布
Owen的博客
08-15 1740
今天有个新需求，点击table行，执行一些操作。实现过程中遇到了：点击操作列、操作列内按钮会冒泡触发行点击。antd版本：1.7.8。
antd的Dropdown组件阻止事件冒泡
热门推荐
吴小迪的博客
07-30 4万+
笔者在开发的过程中遇到了使用Dropdown组件在点击事件的时候阻止事件冒泡。 阻止事件冒泡就是使用event对象的stopPropagation()方法。 Dropdown组件想要把每一个阻止事件冒泡就这样写： <Dropdown overlay={ <Menu> <Menu.Item onClick={eve => { // 修改要做...
checkbox全选后刷新成全不选问题和阻止冒泡事件
Helloworld2200的博客
10-26 851
全选全不选方法1.问题是：我点击全选的checkbox时，下面的复选框会全部勾选一下然后恢复不勾选的状态，这是因为事件冒泡刷新了方法。<input type='checkbox' name='testId' id='testId'>//表头的checkbox <input type='checkbox' name='testIds' class='checkbox' value=' + bizI
antdv组件库事件冒泡
编程小将
01-18 1035
在antdv组件库中，把折叠面板和上传控件一起使用，当点击上传按钮时，虽然会弹出文件选择窗口，但同时每次点击时折叠面板都会切换打开状态。 这是由于事件冒泡，当点击图标的时候穿透到了底下的折叠面板，所以两个事件响应都执行了 要解决这个问题，只需要在extra插槽的顶层标签加上@click.stop.prevent即可，示例如下 <div slot="extra" @click.stop.prevent> <a-upload name="file" :file-list=
antd tree组件最后一级展开节点消失
04-01
可能是由于您的数据结构不正确或者您的代码逻辑问题所致。以下是一些可能的原因和解决方法： 1. 数据结构问题：请确保您的数据结构正确，即每个节点的子节点都应该是一个数组或者空数组。如果您的数据结构不正确，可能会导致最后一级节点无法正确展开。 2. 代码逻辑问题：请检查您的代码逻辑是否正确。例如，您可能会在某些情况下错误地删除了最后一级节点，或者在渲染节点时忘记了添加key属性。这些问题可能会导致最后一级节点无法正确展开。 3. 组件属性问题：请检查您的组件属性是否正确。例如，您可能会在tree组件中设置了showLine属性，但是没有设置lineHeight属性，这可能会导致最后一级节点无法正确展开。 希望能够帮助到您解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值