在许多应用场景中，我们经常需要一个输入框，它既能让用户从预设选项中选择，也允许手动输入新值并即时添加。本文将介绍如何创建一个灵活的 Vue 输入框组件，使其能够支持下拉选项选择，并且可以通过键盘回车(Enter)键来确认并添加用户新输入的值。
我们的目标是构建一个类似下图所示的输入框组件，它包含以下功能：
点击下拉箭头，可从预设列表中选择已有选项;
支持在输入框中直接键入内容;
在输入过程中，按下回车键能够将当前输入的内容作为新值添加到选项列表中。
有多种方式可以实现这样的功能。其中最便捷的途径是使用成熟的 UI 组件库，它们通常已经内置了类似功能的组件，我们只需合理配置即可。
例如，在 Element UI 和 Ant Design Vue 中，都提供了功能完备的选择器组件。它们默认支持筛选、自定义选项渲染等功能，并且很容易扩展出“回车添加新值”的行为。通常，我们只需要启用 filterable或 allow-create属性，并配合监听键盘事件(如 keydown.enter)，就可以在用户按下回车时将输入框中的内容添加为新选项。
借助这些 UI 框架，我们可以大幅减少开发工作量，快速得到一个功能丰富、样式美观的灵活输入框组件，以满足多种业务需求。