element ui 下拉菜单改为右键触发

element ui改el-dropdown为右键触发的实现，面对这种需求，elementui里的el-dropdown的触发方式里没有这种方式。读完这篇文章希望你喜欢，希望点赞关注一下，如果觉得讲的不好请评论区斧正。

element ui改el-dropdown为右键触发。网上的对于el-dropdown为右键触发总是一篇一篇的虽然，不能说错误的实现方式，但是我发现了另一种更好的实现方式。

<el-dropdown ref="Contextmenu" :hide-on-click="true">
  <span class="el-dropdown-link" @contextmenu="handContextmenu">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

由以上代码可见，以上代码是element ui 的el-dropdown下拉菜单最简易的代码，$refs可以看见elementui组件库实现下拉菜单隐藏和显示的原理，和el-dialog的显示与隐藏一样，所以在下拉菜单的ref里找到visible属性和show()方法。el-dropdown 其内核是用了el-popper来封装的，在el-popper的的自定义显示用visible控制显示与否，所以我们只需在鼠标右键触发时将ref里的visible改为true，把触发事件绑定在触发体上并且使用show方法来保持稳定性，具体方法由以下代码体现。

handContextmenu(){
	this.refs.Contextmenu.visible = true
	this.refs.Contextmenu.show()
}

我也看过网上的一些文章，做出了以下优化。

1. 有些文章将hide-on-click的属性改为了false，但是这样设置以后我们无法在点击后让el-dropdown自动消失。

2. 无需关注trigger的值，当我们的触发方式实现后便会覆盖原来的实现方式。