功能介绍
模仿百度首页右上方的【设置】链接,当鼠标移入到【设置】文字上方时,显示出在下方的选择列表,需要达到的几个要求:
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