Vue如何通过变量表达式实现复杂长尾词选择器功能？

本文共计2204个文字，预计阅读时间需要9分钟。

在input输入框中输入表达式，在中台项目中是常见场景。通常输入特定字符时（如$、字符），会显示下拉列表，用户选择列表中的变量后，继续在input输入框中输入。

在 input 输入框中输入表达式在中台项目中是比较常见的场景。其通常是输入一个特定的字符时(如 $ 字符)，显示下拉列表，用户点选下拉列表中的变量，然后继续在 input 输入框中输入其它运算符，组成一个表达式，其效果如下图：

在之前的项目中，使用 React + TypeScrpt 实现了React版的变量表达式选择器，在本文中，我们将会介绍使用Vue如何实现一个变量表达式选择器。

该变量表达式将会实现以下效果：

1. 当在输入框中输入特定字符时，显示下拉列表；
2. 可通过键盘上下键切换下拉选项，鼠标点击下拉选项或者按下 enter 键，选中内容显示到输入框上；
3. 光标移到已输入字符的任意位置，选择下拉列表的内容，选中的内容显示在当前光标所在的位置；
4. 当显示下拉列表，但未选择下拉列表的内容时，input输入框将会被禁止输入，只有选中内容后才允许继续在输入框中输入内容
5. 禁止显示输入框的历史记录；

定义HTML结构

由于现有的 select 选择器无法实现我们想要的效果，因此我们需要自己实现一个select选择器。使用 input 标签作为我们的select选择器的输入框，ul li 标签作为select选择器的下拉列表。