vue 使用vant2的van-stepper步进器,阻止事件冒泡

最新推荐文章于 2023-07-25 16:46:47 发布
最新推荐文章于 2023-07-25 16:46:47 发布
阅读量801 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36618604/article/details/130947299
版权
在Vue项目中，通过在div元素上添加@click.stop事件可以阻止van-stepper组件的点击事件冒泡，实现数量调整时不影响其他操作。change_number方法用于处理数量变化和索引信息。
摘要由CSDN通过智能技术生成

在van-stepper步进器上加div 再添加@click.stop事件，即可解决问题。

<div class="conterLists_table_flex_left_width_stepper" @click.stop>
    <van-stepper style="margin-bottom: 0px;margin: 0px 10px;" input-width="50px" button-size="20px" integer theme="round" button-size="22" min="1" v-model="item.number" @change="change_number($event,index)"></van-stepper>
</div>

 change_number(e,index) {
        var _this = this;
        event.stopPropagation()
        console.log(e); //数量
        console.log(index); //索引
      },
qq_36618604
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-stepper:Vue步进器组件将与Vuex和Vue Router一起使用
03-06
import Stepper from '@ricadesign/vue-stepper' Vue . use ( Stepper , { store , routes } ) < rica> 样式： @import ' ~@ricadesign/vue-stepper/dist/stepper ' ; 您可以传递以下颜色道具来设置步进器样式。...
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
vant 步进器值 踩坑记录
拱卒的博客
05-17 4293
这里如何让我的值动态修改呢 1.通过getters 函数获得 : 在mounted 可以显示 在 标签里面无法显示 2.直接获得orderCount的属性: 值不更新 (测试修改值会更新 两层map 不更新) 3.直接弄一层map 试一试 getOrderAndCount 只是获取第一次的初值 我后面添加的订单冒得 4.重新建立一个orderAndCount 问题解决 <van-stepper :value="getOrderAndCount[item.id]" ref="stepp.
Vant 步进器 van-stepper 阻止事件冒泡
grootbaby
08-14 3966
一般情况下 Vue 阻止事件冒泡用 .stop 即可解决 Vue 阻止事件默认行为用.prevent 解决 今天这里是介绍Vant 框架里写购物车，需求是购物车中的商品点击也可以进入到商品详情，于是在 card 标签加了 click 事件，就导致点击步进器van-stepper增加减少也会触发 card 的 click ，用原生事件 event.stopPropagation()即可完美解决 <van-stepper v-model="val.quantity" ...
小程序vant开发阻止事件冒泡
qq_30351747的博客
06-23 2310
小程序vant开发阻止事件冒泡 <van-grid gutter="{{ 10 }}" column-num="2" border="{{ false }}"> <van-grid-item use-slot bind:click="hClickDetails" wx:for="{{ shopList }}" data-nowdata="{{item}}" wx:ke
【微信小程序】van-stepper购物车事件冒泡
weixin_42575720的博客
05-27 763
#####思路： 我研究最简单的方法就是外层加一个标签，用catchtap去阻止 #####关键代码 html： <view catchtap="stepper"> <van-stepper value="{{ item.amount }}" long-press="{{ false }}" data-index='{{index}}' data-item='{{item}}' input-width="30px" button-size="20px" min="1"
vant checkbox 复选框 冒泡事件的处理 点击复选框不触发父元素的点击事件 常见的事件修饰符
m0_49623851的博客
03-07 3262
vant checkbox 复选框 冒泡事件的处理 点击复选框不触发父元素的点击事件 常见的事件修饰符
Vue2步骤条（Steps）
Mr Dear的博客
08-04 1万+
步骤总数和初始选择步骤 均可自定义设置，每个步骤title和description也均可自定义设置传入
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 4977
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
阻止switch开关的事件冒泡
qq_43272035的博客
11-03 1464
在做项目的时候遇到了switch和祖父元素事件冒泡的问题。刚开始想的解决办法是在change里面加e.preventDefault来阻止，然鹅不生效。就抱着试一试的方法在switch的父元素加上stop试试，竟然成功了。 <view v-for="(item, index) in deviceList" :key="index" @tap="airPanel(item, deviceType)" > <view class="device-switch" @tap.stop
vant小程序 Stepper 步进器阻止事件冒泡
a2117971372的博客
05-17 2225
vant官方文档事件 事件名 说明 回调参数 bind:change 当绑定值变化时触发的事件 event.detail: 当前输入的值 每次点击加或减都会触发我顶层view的跳转事件 微信开发文档里介绍 除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。 所以尝试catch:change其结果依旧向上冒泡 微信开发文档里还有一条说明 互斥事件绑定： 自基础库版本 2.8.2 起，除 bind 和 catch 外，还可以使用 mut-
阻止冒泡/穿透-微信小程序(vant weapp)
最新发布
m0_68428581的博客
07-25 1192
（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法
Vant源码解析(三)van-stepper步进器
我的博客
07-18 1824
先说下自己的开发思路，然后在对照下vant组件的思路，来查找下自己的不足。这个步进器有加和减的功能，还有输入的功能，限制最小和最大的功能。
小程序van-stepper在输入0删除本条数据，渲染后下一条数据变为0的bug
xie_candy的博客
05-30 1377
项目场景： 通过wx:for渲染一组数据，通过计步器减少到0，或者直接输入0，等于删除本条数据。 问题描述 检测到计步器的value为0时，通过splice()方法删除本条数据后，下一条数据的计步器也变成0，重新赋值也无效。 原因分析及解决思路 1. 考虑到异步变的问题，设置async-change属性后，通过减少按钮变成0之后删除的数据能正确渲染，但是通过输入0的方式还是有问题。 2. 经过测试，如果删除的数据计数和下一条的数据计数一样，那么删除该条数据后，下一条数据的val.
vant 小程序Stepper 步进器阻止事件冒泡
qq_34810951的博客
11-04 2492
vant 小程序Stepper 步进器阻止事件冒泡vant官网Stepper 步进器事件函数代码块 在使用vant开发小程序购物车的时候，使用Stepper 步进器改变商品选购数量，遗憾的是在父级有checkbox，所以导致我在改变步进器数值的时候同时也选中/取消了checkbox，我知道这是属于事件冒泡的行为，为了阻止这个事件冒泡，小程序的js无法实现 event.stopPropagation(); 小程序阻止事件冒泡的行为是使用catchtap事件，但是看了官网-----如下,没有说阻止事件冒泡，于是
有赞Vant Weapp组件增加api属性，以Stepper 步进器为例
^璐三岁要耍蓅氓♡
12-28 1713
开发小程序使用有赞组件可以省很多时间，其中Stepper 步进器的api属性中有一个decimal-length，可以用来固定显示小数位数，可以防止js出现9999999的情况，也可以限制多于几位小数，在这里操作的时候经常出现冲突，修改价格出现删小数还强迫两位小数，在这里增加了一个新的api属性为maxdec-length，意义为最多显示两位小数。来防止出现这个问题。 到微信小程序npm加载的vantweapp中找到stepper步进器的index.js中，添加代码如下： decim.
@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)
热门推荐
qq_32184753的博客
07-10 2万+
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", dat
uView2没有u-stepper 步进器组件
06-06
非常抱歉，我之前的回答有误，uView2 中没有 `u-stepper` 步进器组件。 不过，你可以使用 `u-number-box` 数字框组件来实现步进器的功能。以下是一个示例： ```vue <u-popup :visible.sync="showPopup" :...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值