VUE中el-input阻止冒泡防止触发父级事件

最新推荐文章于 2024-04-01 17:07:05 发布
最新推荐文章于 2024-04-01 17:07:05 发布
阅读量3.1k 收藏 2
点赞数 3
分类专栏： VUE 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34403976/article/details/120060970
版权 
@click.stop.native

后面如果不执行函数或语句就不用跟 ‘=’ 号了

shimh_凉茶
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义Vue中的v-module双向绑定的实现
01-19
v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定 input 的 value 属性即可。 我们着手实现一遍： 子组件传值 首先子组件需要一个 input 标签，这个 input 标签需要绑定 input 事件，$emit 触发父组件的 input 事件，通过这种方法子组件传递值给父组件 <input type=text @input=$emit('input', $event.tar
解决vue项目中type=”file“ change事件只执行一次的问题
12-29
问题描述 在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，却无法再次上传相同的文件 <template> <div class=hello> <input type=button value=上传文件 name= id= @click=updata> <input type=file style=display:none @change=getFile id=input-file> <div v-if=fileName> <p>上传的文件名：{{fileName}}</p>
element-ui 阻止冒泡事件
qq_33524478的博客
12-31 5227
今天在使用element-ui的计数器时候，外面套了个check-box，怎么都阻止不了冒泡事件。 查到有很多人说在外面套个div，再在div里写click.stop，但是我这里还是失效了，最后找到需要写click.stop.prevent，在这里记录一下，希望能帮到大家。 <el-checkbox class="layout-block ml30" v-model="add"> 这是一个计数器 <div @click.stop.prevent style="display:
element嵌套input阻止事件冒泡
最新发布
Jk200165的博客
04-01 177
在Vue.js中，组件内部的事件处理是通过Vue实现的，而原生DOM事件是浏览器提供的。修饰符，您可以监听到组件内部元素触发的原生DOM事件，从而更灵活地处理事件逻辑。
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 新增~ 通过F12查看实际页面渲染代码 修改~ 通过F12查看实际页面渲染代码 主要是通过 v-bind:disabled 绑定 dataForm.id 的值来动态判断是否添加 disable
Vue 阻止事件冒泡
PB瓦工
01-17 1129
【代码】Vue 阻止事件冒泡。
input的focus事件阻止冒泡
weixin_42190844的博客
09-22 3710
在写界面的时候，选中一个输入框，就会弹出一个弹窗。还需要做可清除。 在加了clearable属性之后，就遇到问题了。点击 X 图标进行清楚之后，弹窗也会打开。 注意：我这里使用的是vxe-input，一个vxe-table组件的输入框 这里的问题就是点击清除图标，@focus也进行了冒泡，执行了打开弹窗的事件。 先上代码 这里原来就是使用的@focus事件来打开弹窗，在遇到冒泡的问题之后，就想着在函数里执行 $event.stopPropagation() 来取消冒泡。但发现没有效果 最后选择使用@c.
element ui 组件阻止冒泡行为
young_sam的博客
03-28 3558
代码 <el-table @row-click="handleRowClick" > <el-table-column align="center" label="数量" > <template slot-scope="scope"> <div @click.stop> <el-input-number v-model="scope.row.
el-table-column 中 input 阻止事件冒泡
QQ2856639881的专栏
09-03 2882
<el-table-column fixed="right" align="center" label="操作" width="240px"> <template slot-scope="scope"> <div @click.stop style="text-align: left;"> &l...
vue点击input弹出带搜索键盘并监听该元素的方法
12-02
1.遇到问题： 需要做一个点击input弹出带搜索的键盘。 解决： input的type=”search”,可弹出带搜索的键盘。并监听搜索按钮，请求数据 <input @keyup.13="show()" type="search"> 2.但是又遇到一个新的问题： 点击搜索之后键盘没有收回。 解决： 通过$refs获取input 监听搜索按钮，添加.blur() <input @keyup.13=show() type="search" ref="input1"> show(){ this.$refs.input1.blur(); } 3.测试时发现ios无法弹出带搜索的键盘 解决： 给
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
input禁止键盘及中文输入,但可以点击
09-04
主要介绍了<input>禁止键盘及中文输入,但可以点击。需要的朋友可以过来参考下，希望对大家有所帮助
vue 模态框场景 阻止事件冒泡
菜鸟吴de博客
11-15 455
vue 事件修饰符 阻止事件冒泡
el-input中clear如何不触发click事件
weixin_35755188的博客
12-24 1436
在 el-input 组件中，clear 按钮是被作为 el-input 的内容，并且触发 click 事件是通过监听 el-input 上的 click 事件实现的。 如果你想在点击 clear 按钮时不触发 el-input 的 click 事件，你可以使用事件冒泡的特性来解决。事件冒泡指的是，当一个元素的事件被触发时，这个事件会先从这个元素开始向外传播，依次冒泡到它的父元素、祖先元素等。 所...
element.ui 中el-input获取焦点事件不触发父元素事件
qq_42594589的博客
04-29 928
把获取焦点事件改成点击事件即可 <input @click.stop.native="">
Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
YY的博客
11-21 549
Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
基于elementui input完成的输入控件
longgege001的博客
11-12 2842
input输入框组件
在el-table中实现vue+el-input-number实现购物车
07-22
您可以通过在 `el-table` 中使用 `el-input-number` 组件来实现购物车功能。以下是一个简单的示例代码： 首先，需要在组件中引入所需的组件： ```vue <template> <div> <el-table :data="cartData" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="quantity" label="数量"> <template slot-scope="scope"> <el-input-number v-model="scope.row.quantity" @change="updateTotalPrice"></el-input-number> </template> </el-table-column> <el-table-column prop="price" label="单价"></el-table-column> <el-table-column prop="totalPrice" label="总价"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { cartData: [ { name: '商品1', quantity: 1, price: 10, totalPrice: 10 }, { name: '商品2', quantity: 2, price: 20, totalPrice: 40 }, { name: '商品3', quantity: 3, price: 30, totalPrice: 90 } ] }; }, methods: { updateTotalPrice() { this.cartData.forEach(item => { item.totalPrice = item.quantity * item.price; }); } } }; </script> ``` 在上述代码中，`cartData` 数组是购物车中的数据源，包含商品名称、数量、单价和总价等信息。在 `el-table` 中的 `el-table-column` 中，使用 `el-input-number` 组件来编辑商品的数量，并通过 `v-model` 绑定到 `cartData` 数组中的 `quantity` 属性上。当数量发生变化时，通过 `@change` 事件触发 `updateTotalPrice` 方法，更新对应商品的总价。 注意：以上代码仅为示例，实际应用中，您可能需要从后端动态获取购物车数据，并与后端进行交互来更新购物车信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值