element 右键菜单,elementui左侧菜单

　　本文主要介绍在Vue element-ui中添加自定义右键菜单的相关信息。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。

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

　　模板

　　El-button size= medium @ context menu . prevent . native= openMenu($ event)

　　.

　　/模板

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

　　ul v-show= visible :style= { left:left px ，top:top px } class= context menu

　　li提升一级/li

　　li向下移动一级/li

　　/ul

　　3.在数据()中定义所需的变量属性

　　data() {

　　返回{

　　可见：假，

　　top: 0，

　　左侧：0

　　}

　　}

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

　　观察：{

　　可见(值){

　　如果(值){

　　document . body . addevent listener( click ，this.closeMenu)

　　}否则{

　　document . body . removeeventlistener( click ，this.closeMenu)

　　}

　　}

　　},

　　5.在方法中定义两种打开右键菜单和关闭右键菜单的方法

　　打开菜单(e) {

　　const menuMinWidth=105

　　const offsetLeft=this。$el.getBoundingClientRect()。左//容器左边距

　　const offsetWidth=this。$el.offsetWidth //容器宽度

　　const max left=offsetWidth-menu width//左边界

　　const left=e . clientx-offset left//15:右边距

　　if (left maxLeft) {

　　this.left=maxLeft

　　}否则{

　　this.left=左

　　}

　　This.top=e.clientY-60 //修复位置bug

　　this.visible=true

　　},

　　closeMenu() {

　　this.visible=false

　　}

　　6.在style中编写右键菜单的样式。上下文菜单{

　　边距：0；

　　背景：# fff

　　z指数：3000；

　　位置：绝对；

　　list-style-type:无；

　　填充：5px 0；

　　边框-半径：4px

　　字体大小：12px

　　字体粗细：400；

　　颜色：# 333；

　　box-shadow: 2px 2px 3px 0 rgba(0，0，0，0.3)；

　　李{

　　边距：0；

　　填充：7px 16px

　　光标：指针；

　　:悬停{

　　背景：# eee

　　}

　　}

　　}

　　注意：在。native修饰符对于vue组件元素监听本机事件是有效的，但是对于本机html元素没有效果。

　　关于在Vue element-ui中添加自定义右键菜单的文章到此结束。关于在Vue element-ui中添加自定义右键菜单的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。