one Why would I want to see how Element implements dropdown?

This is what element Dropdown looks like. See that red line? If you move your mouse over there, after a while, the drop-down menu will disappear. Why is that? Does the way I used to implement drop-down menus not work now? If it works, move it to the one marked red and the drop-down menu should not disappear. If I had done this with javascript before, I would have needed to use the relatedTarget property to determine which dom was being moved to, and then decide whether to hide it or not. Do you use a timer to delay a bit (I’m a bit averse to timers) before relatedTarget? Even if that were possible, it wouldn’t be universal. Itchy heart, then need to check the source code.

two How did I implement the hover effect dropdown menu before?

Principle:

DropDown > dropDownTitle > ul >li >liCopy the code

The code looks something like this:

<! DOCTYPEhtml>
<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">The menu</div>
    <ul>
      <li>1 the menu</li>
      <li>The menu 2</li>
      <li>Menu 3</li>
    </ul>
  </div>
</body>
</html>
Copy the code

3. How exactly is Element implemented? Let’s go and have a look.

Source path: elder-ui /packages/dropdown.vue

Code cut:

. Leaving out a lot of codeshow() {
  if (this.disabled) return;
  /* Clear the timer that has not yet been executed. The main function here should be to avoid the problem of the dropdown menu being hidden and then displayed when the button is moved to the dropdown menu */
  clearTimeout(this.timeout);
  console.log('show after clearTimeout '.this.this.name)
  // The reason for setting the display in timer mode is to avoid the problem of the drop-down menu flashing when the mouse is accidentally scanned
  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 executed ')
  if (this.tabindex >= 0) {
    this.resetTabindex(this.triggerElm);
  }
  console.log('before the clearTimeout')
  clearTimeout(this.timeout);
  console.log('after the clearTimeout')
  // The reason why the timer is set to hide is to allow time for the mouse to move from the button to the drop-down menu, otherwise, when the mouse moves away from the button, the drop-down menu will disappear
  this.timeout = setTimeout(() = > {
    console.log('this.visible'.this.visible)
    this.visible = false;
  }, this.trigger === 'click' ? 0 : this.hideTimeout);
  console.log('after the setTimeout'.this.trigger === 'click' ? 0 : this.hideTimeout,this.timeout)
},

initEvent(){... Leaving out a lot of codeif (trigger === 'hover') {
        /* Register mouse in/out events on that button, call show to set Visible to true when moving in to show the dropdown menu, and call hide to set Visible to false when moving out to hide the dropdown menu, */
        this.triggerElm.addEventListener('mouseenter', show);
        this.triggerElm.addEventListener('mouseleave', hide);
        /* Register mouse move in/move out events on the drop-down menu, call show method to set variable visible to true when moving in to show the drop-down menu, and remove timer set to hide when moving out, call hide method to set variable Visible to false to hide the drop-down menu, */
        dropdownElm.addEventListener('mouseenter', show);
        dropdownElm.addEventListener('mouseleave', hide);
    } else if (trigger === 'click') {
       this.triggerElm.addEventListener('click', handleClick); }},... Omit a lot of code}.... Leaving out a lot of codeCopy the code

Four. sigh

It wasn’t easy. It wasn’t easy. I finally got it.