vue3搜索框回车键触发

### 实现 Vue3 中搜索框按下回车键触发事件 在 Vue3 中，可以通过 `@keyup.enter` 或者 `.native` 修饰符来监听输入框中的回车按键事件。为了防止页面刷新，默认行为可以被阻止。 #### 使用 Element Plus 组件库实现 当使用 Element Plus 的 `<el-input>` 组件时，在模板部分定义如下结构： ```html <template> <div> <!-- 定义带有 @keyup.enter.prevent 修饰符的 el-input --> <el-input v-model="keyword" suffix-icon="search" placeholder="请输入关键字" clearable @keyup.enter.prevent="handleSearch"></el-input> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; // 声明响应式的 keyword 变量用于存储用户输入的内容 const keyword = ref(''); /** * 处理回车键按下的逻辑 */ const handleSearch = () => { console.log('执行搜索操作', keyword.value); }; </script> ``` 上述代码展示了如何通过组合 `v-model` 和自定义事件处理器的方式捕获用户的键盘输入并作出反应[^4]。 对于不使用组件库的情况，则可以直接利用原生 HTML 输入标签配合相同机制完成同样的功能： ```html <!-- 不依赖任何UI框架的情况下也可以这样做 --> <input type="text" v-model="query" @keyup.enter.prevent="doSearch"> <script setup lang="ts"> import { ref } from 'vue'; let query = ref(''); function doSearch() { alert(`正在查找: ${query.value}`); } </script> ``` 此方式适用于更广泛的应用场景，并且同样能够有效拦截默认提交动作以避免不必要的页面重载问题[^3]。 另外需要注意的是，在某些情况下可能还需要考虑跨浏览器兼容性的问题，比如不同浏览器获取 keyCode 属性的方式有所区别[^5]。不过现代开发实践中推荐优先采用标准化更好的 key 标准而不是传统的 keyCode 数字编码。