keyup.enter 和 blur 事件冲突的问题

本文介绍了一种处理在input元素中使用keyup.enter和blur事件导致的数据重复保存问题的方法。通过让回车键直接触发失去焦点事件,避免了两次保存操作的发生。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

处理 keyup.enter 和 blur 事件冲突的问题

有些场景想要在 input 里输入文字,当触发回车或者失去焦点时保存数据
但是当按下回车时往往又会同时触发 blur 事件
所以就会触发两次保存操作,对此有个小技巧,就是让回车触发失去焦点事件。

直接看代码吧

 <input 
	v-model="newValue"
	type="text"
	@blur="saveValue"
	@keyup.enter="saveValue">

修改后:

 <input 
	v-model="newValue"
	type="text"
	@blur="saveValue"
	@keyup.enter="$event.target.blur">
<template> <div class="dynamic-select"> <!-- Element-UI 下拉选择器 --> <el-select v-model="selectedValue" :placeholder="placeholder" filterable clearable @change="handleSelectChange" :disabled="disabled" style="width: 100%" > <el-option v-for="(item, index) in options" :key="index + item.value" :label="item.label" :value="item.value" /> </el-select> <!-- 新增选项输入框 + 确认按钮 --> <div class="add-option"> <el-input v-model="newOption" placeholder="输入新选项" clearable @keyup.enter.native="handleAddOption" :disabled="disabled" class="add-input" /> <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddOption" :disabled="!newOption.trim() || disabled" > 新增 </el-button> </div> </div> </template> <script> export default { name: 'DynamicSelect', props: { // 选项列表(必填) options: { type: Array, required: true, default: () => [] }, // 绑定值(支持 v-model) value: { type: [String, Number, Array], default: '' }, // 占位符 placeholder: { type: String, default: '请选择' }, // 是否禁用 disabled: { type: Boolean, default: false } }, data() { return { selectedValue: this.value, // 双向绑定选中值 newOption: '' // 新增选项的输入内容 } }, watch: { // 监听父组件传入的 value,同步到内部 selectedValue value(newVal) { this.selectedValue = newVal }, // 监听内部选中值变化,同步到父组件 selectedValue(newVal) { this.$emit('input', newVal) this.$emit('change', newVal) } }, methods: { // 选中值变化时触发(可选) handleSelectChange(val) { this.$emit('select-change', val) }, // 新增选项逻辑 handleAddOption() { const label = this.newOption.trim() if (!label) { this.$message.warning('请输入有效内容!') return } // 检查是否已存在相同选项 const isExist = this.options.some(item => item.label === label) if (isExist) { this.$message.warning('该选项已存在!') return } // 生成唯一值(可根据需求自定义,如 UUID、时间戳等) const value = Date.now() // 简单用时间戳作为唯一值 // 更新选项列表 this.options.push({ label, value }) // 选中新增的选项 this.selectedValue = value // 清空输入框 this.newOption = '' // 通知父组件选项已更新(可选) this.$emit('options-updated', this.options) this.$message.success('新增选项成功!') } } } </script> <style scoped> .dynamic-select { display: flex; align-items: center; gap: 8px; } .add-option { display: flex; align-items: center; gap: 4px; } .add-input { width: 140px; } </style> 完善新增功能,并附上使用范例
最新发布
07-30
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值