Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Write native methods

1. In the edited page, you need to add the right menu element and bind contextMenu event as follows:

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

2. Right-click menu content in the page:

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <! --<li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">Open the</li>
      <li @click="handleDelete(rightClickItem)">delete</li>
      <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType! = 99">download</li>
      <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType! = 99">preview</li>
      <li @click="handleUpdate(rightClickItem)">The editor</li> -->
      <li>content</li>
    </ul>
Copy the code

3. Define the required variable properties in data()

data() { 
	return {
			visible: false.top: 0.left: 0}}Copy the code

4. Watch visible change to trigger close right-click menu and call close menu method

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

5. In Method, define two methods to open and close the right-click menu

    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;
    }
Copy the code

6. Right-click menu styles in 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;
}
Copy the code

Refer to the link

Use vUE -context-menu

The demo address

Making the address

Installation:

npm install vue-contextmenu --save
Copy the code

Reference:

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

Use:

<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 (contextMenu data)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: 'demo'.// Coordinates of The display
        axis: {
          x: null.y: null
        },
        // Menu options
        menulists: [{
          fnHandler: 'savedata'.// bind events
          icoName: 'fa fa-home fa-fw'.// icon (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>
Copy the code

Not compatible with Internet Explorer. There are no tests