vue添加自定义右键菜单

小知识，大挑战！本文正在参与“     程序员必备小知识     ”创作活动

一、写原生方法

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

			<li
              v-for="item in resourceList"
              :key="item.id"
              @click="handleClickFolder(item)"
              @contextmenu.prevent="openMenu($event,item)"
            >
            ...
            </li>

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

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <!-- <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
      <li @click="handleDelete(rightClickItem)">删除</li>
      <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
      <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
      <li @click="handleUpdate(rightClickItem)">编辑</li> -->
      <li>内容</li>
    </ul>

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

data() { 
	return {
			visible: false,
			top: 0,
			left: 0
	}
}

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

  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  }

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

    openMenu(e, item) {
      this.rightClickItem = item;

      var x = e.pageX;
      var y = e.pageY;

      this.top = y;
      this.left = x;
      
      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);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}

参考链接

二、使用插件vue-context-menu

demo地址

github地址

安装：

npm install vue-contextmenu --save

引用：

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

使用：

<template>
<div id="app" @contextmenu="showMenu"
    style="width: 100px;height: 100px;margin-top: 20px;background: red;">
    <vue-context-menu :contextMenuData="contextMenuData"
        @savedata="savedata"
        @newdata="newdata"></vue-context-menu>
</div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      	// contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: 'demo',
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [{
          fnHandler: 'savedata', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: 'Save' // The name of the menu option (菜单名称)
        }, {
            fnHandler: 'newdata',
            icoName: 'fa fa-home fa-fw',
            btnName: 'New'
        }]
      }
    }
  },
  methods: {
    showMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
    },
    savedata () {
      alert(1)
    },
    newdata () {
      console.log('newdata!')
    }
  }
}
</script>

tip:有说不兼容ie的，具体没有测试