element-ui点击el-dropdown-item后，el-dropdown-menu二次触发显示的问题_if (this.triggerelm.disabled) return;

问题描述

工作中遇到的问题，点击el-dropdown-item，打开新页面后，由于二次触发导致菜单仍旧显示

点击前

 点击后，进入新页面但是菜单没有消失

 在触发方式为hover时，有时会再次触发下拉菜单显示的效果，查看源码后找到二次触发的原因

触发菜单显示到点击选项期间，鼠标会经过这之间的红色区域，它不属于dropdown，所以此时会先触发hide，再次触发show，而默认展开菜单的延时是250ms，所以当这个过程鼠标过快时，会发生菜单仍旧显示的情况

show() {
        if (this.triggerElm.disabled) return;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.visible = true;
        }, this.trigger === 'click' ? 0 : this.showTimeout);
      },

我的解决办法就是  继承原来的代码，重写点击选项的方法，再触发点击后清除定时器clearTimeout(this.timeout)，这样就可以了

<script>
import { Dropdown } from 'element-ui'
export default {
  name: 'FFDropdown',
  extends: Dropdown,
  methods: {
    handleMenuItemClick(command, instance) {
      if (this.hideOnClick) {
        clearTimeout(this.timeout)
        this.visible = false
      }
      this.$emit('command', command, instance)
    }
  }
}
</script>

记录一下