自定义下拉菜单的收缩实现

本功能第一次遇到是在百度2017年暑期实习生招聘时遇到的，当时的要求是：实现一个类似百度搜索时，输入给出候选词的功能。这个很容易，一般配合ul li 实现，但是有些特殊场景我当时并没有考虑到，如：

由于候选词都是模糊查询的，故当用户输入为空时，这时候模糊查询返回的结果可能并非为null，此时仍会显示候选词输入结果。即：无论何时，该下拉菜单都会显示。

这与自定义下拉菜单的实现类似，在大多数功能中，这种实现都ok，可以控制用户选择完之后，收缩下拉菜单（候选词），但是当用户在输入过程中，突然不想输入，而想看第一条数据时（大多数靠前的数据都会被遮挡），这时你会发现该菜单无法收缩。

这里常见的做法是：

在该html中设置一层mask，而将下拉菜单及相关的操作层置顶，只要检测到鼠标的操作在mask上，而不是下拉菜单层时，判定用户想关闭下拉菜单，此时再隐藏mask和下拉菜单。

故，以下部分给出vuejs中的实现代码：

<div class="navbar">
        <sp