在 Vue 3 中，可以通过在输入框上监听 keydown 事件来检测回车键的按下，并触发相应的操作。以下是实现回车键发送的相关知识和示例：
基础知识
-
事件修饰符：Vue 提供了事件修饰符，可以简化事件处理。例如，
.enter修饰符用于监听回车键。 -
组合式 API：在 Vue 3 中，使用
setup函数来管理组件的逻辑和状态。
实现步骤
使用 .enter 修饰符
Vue 提供了 .enter 修饰符，可以直接在模板中使用：
<template>
<div>
<input type="text" v-model="searchQuery" @keydown.enter="handleEnter" placeholder="输入新闻或概念" />
<button @click="search">搜索</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const searchQuery = ref('');
function search() {
console.log('搜索内容:', searchQuery.value);
}
function handleEnter() {
search();
}
</script>
说明
- v-model: 用于双向绑定输入框的值。
-
@keydown.enter: 监听回车键，当按下回车时，调用
handleEnter方法。 -
handleEnter: 该方法调用
search函数，执行搜索操作。
组合式 API 的使用
在 setup 中使用组合式 API，可以更清晰地组织代码逻辑，尤其是在复杂组件中。
事件监听的另一种方式
如果需要更复杂的逻辑，也可以手动监听 keydown 事件：
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const searchQuery = ref('');
function search() {
console.log('搜索内容:', searchQuery.value);
}
function handleKeydown(event) {
if (event.key === 'Enter') {
search();
}
}
onMounted(() => {
window.addEventListener('keydown', handleKeydown);
});
onUnmounted(() => {
window.removeEventListener('keydown', handleKeydown);
});
</script>
说明
- handleKeydown: 监听所有按键事件，判断是否为回车键。
- onMounted/onUnmounted: 在组件挂载时添加事件监听器，并在卸载时移除。
通过这些方法，可以灵活地在 Vue 3 中实现回车键触发操作。
