mission1:给el组件添加右键菜单

背景: 给element-ui el-tabs实现的标签页组件,添加右键菜单(使用了render函数以及jsx语法)

  1. 使用element-ui dropdown组件作为右键菜单使用。

  2. 首先,组件是使用jsx写在render函数里的。绑定方法不能使用@、修饰符语法糖。

  3. 需要使用ref拿到dom元素,绑定事件,注意取消浏览器默认右键事件:

    1
    2
    event = event || window.event;
    event.preventDefault();
  4. 采用了事件委托的方法绑定事件,需要判断点击的是否为el-pane组件

1
/el-tabs__item/.test(event.target.className)
  1. 手写兼容trigger方法触发点击事件(为了方便拿到activeName:当前页面信息)
1
2
3
4
5
6
7
if (document.all) {
event.target.click();
} else {
var evt = document.createEvent("Events");
evt.initEvent('click', true, true);
event.target.dispatchEvent(evt);
};
  1. 获取鼠标位置,修改dropdown组件的坐标
1
2
self.contextmenuTop = event.clientY;
self.contextmenuLeft = event.clientX;
  1. 官方文档中没有给js调用dropdown的方法,查看源码后,发现在$el中有挂在show方法,this.$refs[‘dropdown’].show()调用即可

注意,这里有个坑是方法触发的事件一定要在弹出框动画延时之后,否则,会触发element的 v-clickoutside指令,导致触发hide()方法,即setTimeout(() => self.$refs['tabsContentmenu'].show(), 250)

坚持原创技术分享,您的支持将鼓励我继续创作!