Element Plus 中 el-mention 组件 change 事件的使用注意事项

问题背景

在使用 Element Plus 的 el-mention 组件时，开发者可能会遇到一个常见问题：当在输入框中输入内容并选择提及项后，change 事件返回的值与预期不符。具体表现为，当输入类似 aa${name} 的内容时，change 事件返回的是 aa$ 而不是完整的 aa${name}。

技术原理分析

el-mention 组件是基于 input 组件封装的，因此它继承了 input 组件的事件系统。change 事件是原生 input 元素的标准事件，其触发时机是在输入框失去焦点或用户按下回车键时，且仅在模型值发生变化时触发。

正确的事件处理方式

1. select 事件：当用户选择提及项时触发，可以获取当前选中的选项和前缀

   • 优点：能准确获取用户选择的提及项
   • 限制：只能获取当前选中值，无法获取输入框中的完整内容

2. input 事件：当输入框内容发生变化时实时触发

   • 优点：能实时获取输入框中的完整内容
   • 适用场景：需要实时监控输入内容变化的场景

3. watch 监听：通过 Vue 的 watch 功能监听 v-model 绑定的值

   • 优点：响应式地获取最新值
   • 实现方式：可以设置 immediate: true 来立即获取初始值

最佳实践建议

对于需要获取完整输入内容的场景，推荐使用以下组合方案：

1. 使用 v-model 进行双向绑定
2. 配合 watch 监听器实时获取最新值
3. 必要时结合 select 事件处理特定的提及项选择逻辑

示例代码

const value = ref('')
const handleSelect = (option, prefix) => {
  // 处理提及项选择逻辑
}

watch(() => value.value, (newVal) => {
  // 实时获取最新输入内容
  console.log('当前输入内容:', newVal)
}, {
  immediate: true
})

总结

理解 el-mention 组件的事件机制对于正确使用该组件至关重要。change 事件由于其特定的触发条件，可能不适合所有场景。开发者应根据实际需求选择合适的事件处理方式，或组合使用多种监听机制来满足业务需求。

对于需要实时获取输入内容的场景，优先考虑使用 input 事件或 watch 监听器，而对于需要处理提及项选择的场景，则应该使用 select 事件。这种区分使用的方式能够更精准地满足不同业务场景的需求。