Detailed explanation of how to customize the right-click menu in vue

On the edited page, you need to add the right-click menu element and bind the contextmenu event, as follows:

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

Write the right-click menu content on the page:

&lt;ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"&gt;
 &lt;!-- &lt;li v-if="==99" @click="handleClickFolder(rightClickItem)"&gt;Open&lt;/li&gt;
 &lt;li @click="handleDelete(rightClickItem)"&gt;delete&lt;/li&gt;
 &lt;li @click="handleDownloadFile(rightClickItem)" v-if="!=99"&gt;download&lt;/li&gt;
 &lt;li @click="handlePreviewFile(rightClickItem)" v-if="!=99"&gt;Preview&lt;/li&gt;
 &lt;li @click="handleUpdate(rightClickItem)"&gt;edit&lt;/li&gt; --&gt;
 &lt;li&gt;content&lt;/li&gt;
 &lt;/ul&gt;

Define the required variable attributes in data()

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

Observe the changes in visible to trigger the right-click menu to close the menu and call the method to close the menu.

 watch: {
 visible(value) {
 if (value) {
 ('click', )
 } else {
 ('click', )
 }
 }
 }

Define two methods to open the right-click menu and close the right-click menu in method

 openMenu(e, item) {
  = item;

 let x = ;
 let y = ;

  = y;
  = x;
 
  = true;
 },
 closeMenu() {
  = false;
 }

Write the style of the right-click menu in style

.contextmenu {
 margin: 0;
 background: #fff;
 z-index: 3000;
 position: fixed;
 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-color: rgb(3, 125, 243);;
 color: white;
}

Reference document address

This is the end of this article about how to customize the right-click menu in vue. For more related contents of custom right-click menus, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!