elementUI 使用input等组件,change事件想传两个(或以上)参数(一个默认的value,一个自定义的value)的方法

本文介绍如何使用Element UI中的el-input-number组件,并通过监听其改变事件来实现商品计数器的功能。代码示例展示了如何在Vue.js中设置最小值、最大值以及如何在值变化时获取当前ID。

直接上代码吧

<el-input-number 
@change="((val)=>{handleChange(val,items.id)})" 
v-model="items.number" 
:min="1" 
:max="maxProNum" 
label="描述文字">
</el-input-number>
handleChange (value, id) { // 监听商品计数器
      console.log(value, id) // value默认参,id当前所需的id
  }
### elemenu UI Input 组件 @blur 事件自定义参数使用方法Elemenu UI 的 `el-input` 组件中,可以通过箭头函数的方式实现向 `@blur` 事件递额外的自定义参数。具体做法是利用 Vue.js 中的事件绑定机制,在模板部分通过箭头函数包裹原生事件处理逻辑,并手动将目标参数附加到回调函数中。 以下是详细的说明以及代码示例: #### 方法描述 为了使 `@blur` 事件能够接收自定义参数,可以采用如下方式: - 定义一个箭头函数作为事件处理器。 - 在箭头函数内部显式调用实际的方法并附带所需的参数- 此外,如果需要访问原始 DOM 事件对象,则需将其一并通过 `$event` 显式递给最终的目标方法[^1]。 #### 示例代码 下面是一个完整的例子展示如何为 `el-input` 的 `@blur` 事件添加自定义参数: ```vue <template> <div> <!-- el-form-item 包裹 el-input --> <el-form-item prop="startNo" label="起始单号"> <el-input v-model="hospitalForm.startNo" clearable suffix-icon="el-icon-edit" @blur="(e) => handdlerBlur(e, hospitalForm.startNo)" /> </el-form-item> </div> </template> <script> export default { data() { return { hospitalForm: { startNo: '' } }; }, methods: { handdlerBlur(event, value) { console.log('Event:', event); // 原生事件对象 console.log('Value:', value); // 自定义参数 (当前输入框的内容) // 可在此处执行进一步操作,比如校验数据转换 } } }; </script> ``` #### 关键点解析 1. **箭头函数的作用** 使用 `(e) => handlerFunction(e, param)` 这种形式可以让开发者自由控制哪些参数会被入到指定的事件处理程序中。其中 `$event` 表达式的值代表由浏览器触发的实际 Event 对象[^2]。 2. **v-model 数据同步** 如果希望同时获取用户输入的数据并与表单项保持双向绑定关系,则可以直接借助 `v-model` 属性来管理状态更新过程而无需单独读取 DOM 节点属性[^3]。 3. **适用场景扩展** 类似的技巧同样适用于其他类型的交互行为,例如按键组合捕获 (`@keyup`) 者选项改变通知 (`@change`) 等情况下的增强型功能开发需求[^4]. #### 注意事项 尽管上述模式有效解决了基本问题,但在某些复杂情形下可能会遇到性能瓶颈者维护困难等问题。因此建议仅当确实有必要时才引入此类设计思路;另外还需注意避免过度依赖外部变量可能导致的状态混乱风险[^5]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值