uniapp阻止uni-nimber-box的事件冒泡

ZhouJingID

已于 2023-11-20 10:34:03 修改

阅读量231

点赞数

文章标签： uni-app java 前端

于 2023-11-20 10:31:52 首次发布

本文链接：https://blog.csdn.net/zhoujingid/article/details/134502027

版权

文章讨论了在使用uni-number-box组件时，如何正确地应用`stopPropagation`方法，强调了必须添加`native`属性以确保事件处理的正确性，同时提到了`changeNumberBox`和`tostop()`函数的使用。

摘要由CSDN通过智能技术生成

只添加.stop会报错 $event.stopPropagation is not a function

还得加上native

<uni-number-box :min="0" :max="999" :value="item.quantity" @change.native.stop="changeNumberBox" @click.native.stop="tostop()" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZhouJingID

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

uni 阻止事件冒泡

birdsnotbirds的博客

04-21

1052

在一个组件内如果有两个点击事件我们不希望小的点击事件触发所有的点击事件就应该阻止小的点击事件的冒泡防止所有的点击事件都被触发 <text @click.stop="bottom(index)" ></text > ...

uni-app——如何阻止事件冒泡

每天都想吃好吃的

11-01

3536

在开始讨论如何阻止事件冒泡之前，让我们先了解一下什么是事件冒泡事件冒泡是指在DOM树中，当一个元素上的事件被触发时，会沿着父元素一直向上层传递，直到根元素。这种传递过程就像气泡从水底冒出来一样，因此被称为事件冒泡。在uni-app中，事件冒泡是指当一个组件上的事件被触发时，如果该组件有父组件，事件会沿着组件树向上层传递，直到根组件。这样做的好处是可以在父组件中监听子组件的事件，并进行相应的处理。

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

uni-app的uni-number-box数据延迟问题

最新发布

薛文诚的博客

08-26

【代码】uni-app的uni-number-box数据延迟问题。

uniapp中使用.stop报错无法使用stopPropagation？

g1437353759的博客

04-13

1071

在开发中我们常常会遇到要的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function这是因为当事件添加到上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。

uniapp uni-number-box插件自动触发change事情的解决办法

lyz246859的博客

04-03

1248

应该是uni-number-box的事件受数据更新的影响，外层元素的数据更新，也会带动他的数据更新，所有就会自动触发change事件，有时候自动触发也是合理的，但是如果想阻止的话，那就只能去源代码上修改了，去掉监听事件。

在vue和uni中.stop阻止事件冒泡失败？

HHHHH2187的博客

10-08

1026

这时候我们可以使用.native事件修饰符，在父组件中给子组件绑定一个原生事件，native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符，可以将原生事件绑定到组件的根元素上。这里我是使用uview的组件行里面插了icon但是单独点击icon会发现同时触发了u-cell-item的事件。但是我发现使用stop并没有直接阻止的事件冒泡。

vue或uni中.stop阻止事件冒泡报错的问题（修饰符.native）

zhangjiayu88的博客

04-02

5225

在开发中我们常常会遇到要阻止事件冒泡的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function。这是因为当事件添加到Vue组件上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。1.native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)；2. native修饰符只能用在组件上, 不能用在原生标签上。，就可以解决这个报错问题。

uniapp-table中改版uni-table插件

07-03

标题"uniapp-table中改版uni-table插件"表明我们正在讨论的是对`uni-table`组件的一个定制化改版。这个改版可能源于开发者对原组件功能的不足或者需要添加特定的交互效果。在这个过程中，开发者通常会深入理解组件的...

uniapp 之 uni-table组件添加行点击事件

m0_67402026的博客

03-08

3159

uniapp 之 uni-table组件添加行点击事件第一种方案（不改变导入的 tr 组件）第二种方案（改变 tr 组件）写在末尾由于 uniapp官网的uni-table组件并没有给出添加行点击事件的events，于是自己想方法基于uni-table组件实现了表格行点击事件；第一种方案（不改变导入的 tr 组件） <uni-table border stripe emptyText="暂无更多数据" :loading="loading"> <!-- 表头行

uniapp框架-uniapp封装控件-7种图表漂亮丰富uniCharts-uni-app项目源码-vue语法格式.zip

05-21

UniApp开发前景分析：专业视角引领未来随着移动互联网的迅猛发展，跨平台应用开发框架UniApp以其独特的优势，展现出广阔的开发前景。 UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和...

uniapp-chat:借助uni-app开发的 chat聊天界面

05-11

在mui中有chat界面的例子，升级到uni-app后，没有类似的模板，因此模仿写了一个。遇到了一些坑，在此一一记录下来。当然，由于是新手，可能有些坑可以避开。 scroll-view高度的设置输入内容后，必然要在对话界面的...

第23章 NumberBox(数值输入框)组件1

08-03

第 23 章 NumberBox(数值输入框)组件学习要点：1.加载方式2.属性列表3.事件列表4.方法列表主讲教师：李炎恢本课程由北风网和瓢城 Web 俱乐部

28套-uniapp项目源码-涵盖仿商城&仿官网&组件封装等uni-app项目.zip

05-22

uniapp开发前景分析随着移动互联网的快速发展，跨平台开发框架日益受到开发者的青睐。uniapp以其“一次编写，多端发布”的特性，在市场中脱颖而出。它不仅支持iOS、Android、H5、小程序等多个平台，还提供了丰富的...

uniapp组件-uni-number-box数字输入框

热门推荐

03-02

1万+

官网示例：https://ext.dcloud.net.cn/plugin?id=31 数字输入框组件多用于购物车加减商品等场景一、基本属性 <template> <view class="page"> <uni-number-box /> <uni-number-box :min="2" :max="7" :value="4" /> <uni-number-box :step="0.1" /> <uni-

uni-app uni-number-box使用踩坑记录（Vue3）

卿本无忧的博客

09-30

5548

uni-app uni-number-box使用踩坑记录（Vue3）在uni-number-box 输入数量，页面显示值修改了，但实际上打印时还是原来的值

uni-app——uniapp 步进器uniapp-u-number-box限制最小值和最大值

qq_43201350的博客

03-01

633

uni-app——uniapp 步进器uniapp-u-number-box限制最小值和最大值

uni-number-box【数字输入框组件】，change事件自定义传参

weixin_48596030的博客

06-21

1001

【代码】uni-number-box【数字输入框组件】，change事件自定义传参。

uniapp购物车中使用uni-number-box步进器，通过递减为0删除当前商品时，下一条商品步进器绑定的值变为0的问题

LiuAshin的博客

05-09

480

来控制组件的显示和隐藏。这样，当数量为0时，组件会被完全销毁和重新创建，从而避免了状态复用的问题。出现此类情况可能是步进器的状态复用问题，可能是因为。：而不是在数据变化时删除数组中的项，可以使用。组件在列表更新时没有正确地响应数据变化。

uni-app的uni-number-box组件怎么设置支持小数

一撇一画的博客

04-28

2269

第一次使用官方的uni-numbox，把step设置成小数点，才可以输入小数点。嗯~~。还是饿了么ElInputNumber组件好用。copy改造了下添加precision控制，小数点就ok了。 template、style不变。其他更多功能去饿了么添加 export default { name: "UniNumberBox", emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], props: { val

uniapp 调整uni-data-checkbox样式

07-17

UniApp 中的 `uni-data-checkbox` 是一个用于创建复选框组件的 Vue 组件，如果你想调整其样式，你可以通过 CSS 样式表来定制。首先，你需要了解它的基本结构，它通常包含一个输入元素和相关的标签。以下是调整样式的基本步骤： 1. **全局样式**：如果想要改变所有 `uni-data-checkbox` 的样式，可以在项目的 `app.wxss` 或者统一的主题样式文件中添加如下规则： ```css .uni-data-checkbox { /* 自定义属性 */ width: your-width; height: your-height; border-color: your-border-color; background-color: your-background-color; color: your-text-color; } /* 更具体的伪类选择器，如选中状态 */ .uni-data-checkbox-checked { background-image: url('your-checkmark-image-url'); } ``` 2. **局部样式**：如果你只想针对特定的 checkbox 进行样式修改，可以将上述CSS应用到该组件实例上，比如： ```html <template> <view class="custom-checkbox"> <uni-data-checkbox v-bind:class="{ checked: isChecked }" :style="{ width: '50px', height: '30px' }"></uni-data-checkbox> </view> </template> <style scoped> .custom-checkbox .uni-data-checkbox-checked::before { content: ''; background-image: url('your-checkmark-local-image-url'); } </style> ``` 在这个例子中，`.custom-checkbox` 类会覆盖默认样式，并且当选中时使用自定义的检查标记图片。记得在实际应用中替换相应的属性值和 URL，以便达到预期的效果。