是先做微信小程序_Vue+element

Vue+element-ui添加自定义右键菜单的方法示例       这篇文章主要给大家介绍了关于Vue+element-ui添加自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
const menuMinWidth = 105 const offsetLeft = this.$el.getBoundingClientRect().left // container margin left const offsetWidth = this.$el.offsetWidth // container width const maxLeft = offsetWidth - menuMinWidth // left boundary const left = e.clientX - offsetLeft // 15: margin right if (left maxLeft) { this.left = maxLeft } else { this.left = left this.top = e.clientY - 60 // fix 位置bug this.visible = true closeMenu() { this.visible = false

6、在style中写右键菜单的样式

 .contextmenu {
 margin: 0;
 background: #fff;
 z-index: 3000;
 position: absolute;
 list-style-type: none;
 padding: 5px 0;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 400;
 color: #333;
 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
 li {
 margin: 0;
 padding: 7px 16px;
 cursor: pointer;
 :hover {
 background: #eee;

注意：.native修饰符对vue组件元素监听原生事件有效，对原生的html元素使用，反而没有效果。

到此这篇关于Vue+element-ui添加自定义右键菜单的文章就介绍到这了,更多相关Vue+element-ui添加自定义右键菜单内容请搜索凡科以前的文章或继续浏览下面的