el-input中change事件造成的坑
- 一、change事件定義
- 二、如果僅回車時候觸發
一、change事件定義
僅在輸入框失去焦點或用戶按下回車時觸發
二、如果僅回車時候觸發
<el-inputv-model.trim="questionInput"placeholder="請輸入你的問題,按回車發送"prefix-icon="el-icon-search"class="custom-placeholder-recommend"@keyup.native.enter="handleRecommend('input', '', $event)"clearable
>
//@click.stop 或者 @click.prevent
</el-input>handleRecommend(type, name, event) {if (event) {event.stopPropagation(); // 阻止事件冒泡//@keydown.enter.preventevent.preventDefault(); // 阻止默認的換行行為}
},
在 Vue.js 中,@keyup.enter 和 @keyup.native.enter 是兩種不同的事件監聽方式,具有以下區別:@keyup.enter:
@keyup.enter 是 Vue 的內置事件修飾符,用于監聽鍵盤按鍵事件。在這種情況下,.enter 表示監聽回車鍵(Enter 鍵)的按鍵事件。
當使用 @keyup.enter 時,Vue 將會在組件上綁定一個處理器來監聽鍵盤按鍵事件,并只在按下回車鍵時觸發對應的函數。@keyup.native.enter:
@keyup.native.enter 是基于原生 DOM 事件的方式來監聽鍵盤按鍵事件,且將聚焦在元素上的第一個子元素。
使用 @keyup.native 可以綁定到組件的根元素上,而不是組件自己處理鍵盤事件。這樣可以確保即使 <el-input> 組件內部的某些元素也能夠響應鍵盤事件。添加 .native 修飾符后,在父組件中觸發的鍵盤事件能夠穿透到子組件,并且不需要在子組件中再次聲明鍵盤事件監聽器。
因此,如果您想在父組件中處理特定的鍵盤事件并確保該事件能夠傳遞到子組件,可以使用 @keyup.native.enter。而 @keyup.enter 則是直接在當前組件上監聽回車鍵事件。根據需要,選擇合適的方式來監聽鍵盤事件。