【每日一练】鼠标移入文字下方显示列表

功能介绍

模仿百度首页右上方的【设置】链接，当鼠标移入到【设置】文字上方时，显示出在下方的选择列表，需要达到的几个要求：
1、鼠标移到【设置】，显示【列表框】
2、鼠标移出【设置】，【列表框】仍然显示一会才会消失
3、鼠标移到【列表框】时，【列表框】仍然存在
如下图所示：

方法思路

这里采用的是基本框架是vue，使用其他方法的也可以借鉴，此处不讲样式，只讲基本思路。
1、给【列表框】使用 v-if 控制是否显示，并且同时存在两个判断值，只要达到其中一个就可以显示，简称A和B，两者最开始都为false，判断语句为 v-if = “A || B”
2、【设置】上添加两个方法，移入与移出，@mouseenter 与 @mouseleave 。
移入【设置】时，A = true；
移出【设置】时，设置个定时setTimeout，约200ms左右是比较舒适的一个停顿，可以自行控制，并且设置A = false
3、【列表框】上添加两个方法，移入与移出，@mouseenter 与 @mouseleave 。
移入【设置】时，B= true；
移出【设置】时，设置个定时setTimeout，约200ms左右是比较舒适的一个停顿，可以自行控制，并且设置B = false

代码（代码未进行精简，有需要的可以自行抽取代码进行精简）

<div @mouseleave="closeShowSetDropList" @mouseenter="showDropList = true"