一。为什么我会想看element如何实现的 dropdown?
上面是element dropdown显示时的效果，看到那个红色标注的地方吗? 如果你把鼠标移动到那里, 过一会之后，这个下拉菜单就会消失。这是为什么？难道我以前实现下拉菜单的方式现在不能用了？如果能用，那移动到标红的那里，下拉菜单应该不会消失才对。如果是采用别的方案（我以前也通过js实现过这种效果，但那需要用到relatedTarget属性，判断当前到底是移动到那个dom上面了，然后决定是否隐藏），看效果element好像也是这样，可是中间隔了一段，那应该就没法实现了呀，难道用定时器延迟一会（个人对定时器是有点抵触的），再进行relatedTarget的判断? 就算这样能实现，应该也难以通用啊。心痒难耐，遂需要查看源码一探究竟。
二。我以前是怎么实现hover效果的下拉菜单?
原理:
// 定义类似这样的html结构
.dropDown
> dropDownTitle
> ul
>li
>li
// ul默认隐藏
// 在dropDown中加入伪类 :hover, 在这个伪类触发时, 显示ul
代码大概是这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
margin:0;
}
ul,li{
margin:0;
list-style-type: none;
padding:0;
}
.dropDown{
width: 200px;
}
.dropDownTitle{
background-color: lightgoldenrodyellow;
}
.dropDown:hover > ul{
display: block;
}
ul{
display: none;
margin-top:10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="dropDown">
<div class="dropDownTitle">菜单</div>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
</body>
</html>
三。element到底是怎么实现的？走，去看看。
源码路径: element-ui/packages/dropdown.vue
代码截选:
....省略很多代码
show() {
if (this.disabled) return;
/*
清除尚未执行的定时器, 这里的主要作用应该是为了避免在移出按钮，移入到下拉菜单时，
下拉菜单先被隐藏，然后再被显示的问题
*/
clearTimeout(this.timeout);
console.log('show clearTimeout之后',this,this.name)
// 之所以通过定时器方式设置显示，应该是为了避免，鼠标不经意扫过时，下拉菜单闪现的问题
this.timeout = setTimeout(() => {
this.visible = true;
}, this.trigger === 'click' ? 0 : this.showTimeout);
},
hide() {
if (this.disabled) return;
console.log(this.disabled, new Date().toLocaleTimeString())
this.removeTabindex();
console.log('removeTabindex已执行')
if (this.tabindex >= 0) {
this.resetTabindex(this.triggerElm);
}
console.log('clearTimeout之前')
clearTimeout(this.timeout);
console.log('clearTimeout之后')
// 之所以通过定时器方式设置隐藏，应该是为了给鼠标从按钮移入到下拉菜单留时间，不然，鼠标一移出按钮，下拉菜单就消失了
this.timeout = setTimeout(() => {
console.log('this.visible',this.visible)
this.visible = false;
}, this.trigger === 'click' ? 0 : this.hideTimeout);
console.log('setTimeout之后',this.trigger === 'click' ? 0 : this.hideTimeout,this.timeout)
},
initEvent(){
....省略很多代码
if (trigger === 'hover') {
/*
在那个按钮上注册鼠标移入/移出事件，
移入时调用show方法将变量visible设置为true表示显示下拉菜单,
移出时调用hide方法将变量visible设置为false表示隐藏下拉菜单,
*/
this.triggerElm.addEventListener('mouseenter', show);
this.triggerElm.addEventListener('mouseleave', hide);
/*
在下拉菜单上注册鼠标移入/移出事件，
移入时调用show方法将变量visible设置为true表示显示下拉菜单，同时移除设置隐藏的定时器,
移出时调用hide方法将变量visible设置为false表示隐藏下拉菜单,
*/
dropdownElm.addEventListener('mouseenter', show);
dropdownElm.addEventListener('mouseleave', hide);
} else if (trigger === 'click') {
this.triggerElm.addEventListener('click', handleClick);
}
},
....省略很多代码
}
....省略很多代码
四。感叹
不容易，不容易，终于让我勉强搞懂了。
