问题描述
工作中遇到的问题,点击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>
记录一下