个人中心
gpt4 book ai didi

Vue+element-ui添加自定义右键菜单的方法示例

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue+element-ui添加自定义右键菜单的方法示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件 。

?
1
2
3
4
< template >
< el-button size = "medium"  @ contextmenu.prevent.native = "openMenu($event)" >
......
</ template >

2、在页面编写右键菜单内容 。

?
1
2
3
4
< ul v-show = "visible" :style = "{left:left+'px',top:top+'px'}" class = "contextmenu" >
    < li >上移一层</ li >
    < li >下移一层</ li >
  </ ul >

3、在data()中定义需要的变量属性 。

?
1
2
3
4
5
6
7
data() {
     return {
             visible: false ,
             top: 0,
             left: 0
     }
}

4、观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法 。

?
1
2
3
4
5
6
7
8
9
watch: {
  visible(value) {
   if (value) {
    document.body.addEventListener( 'click' , this .closeMenu)
   } else {
    document.body.removeEventListener( 'click' , this .closeMenu)
   }
  }
},

5、在method中定义打开右键菜单和关闭右键菜单的两个方法 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
openMenu(e) {
  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中写右键菜单的样式 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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添加自定义右键菜单内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/qq_42991509/article/details/100736595 。

最后此篇关于Vue+element-ui添加自定义右键菜单的方法示例的文章就讲到这里了,如果你想了解更多关于Vue+element-ui添加自定义右键菜单的方法示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： 布隆过滤器(bloom filter)及php和redis实现布隆过滤器的方法
文章推荐： laravel实现批量更新多条记录的方法示例
文章推荐： 如何在CentOS中安装PHP7.4的方法步骤
文章推荐： 基于vue与element实现创建试卷相关功能(实例代码)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com