“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

Recently, the product raised a requirement for me ———— to realize the function of displaying the action bar of a row in the table when the user right-clicks it. I think this requirement is very interesting and hereby share it with you.

Technology stack: elementUI

Implementation approach

To implement a right-click menu we need to define a menu bar component and when the user clicks on a row of the table, we take care of the display position and render the menu bar onto the table. Implement the rightKeyMenu component first:

// right-key-menu.vue 
<template>
  <div id="right-key-menu" class="right-key-menu">
    <div class="rightKeyMenuItem" @click="$emit('edit')">The editor</div>
    <div class="rightKeyMenuItem" @click="$emit('del')">delete</div>
  </div>
</template>
<script>
 / /... ignore
  methods: {
        onload (row, column,event) {
           // Adjust the location of the menu
          let menu = document.querySelector('#right-key-menu')
          let betweenHeight = document.body.clientHeight - event.clientY
          if (betweenHeight < 150) {
            menu.style.top = event.clientY -80 + 'px'
          } else {
            menu.style.top = event.clientY -30 + 'px'
          }
          menu.style.left = event.clientX + 20 + 'px'
          // Listen for the DOM click event
          document.addEventListener('click'.this.$emit('rightClick'))}}</script>      
<style>
.right-key-menu {
  display: block;
  line-height: 34px;
  text-align: center;
}
.right-key-menu:not(:last-child) {
  border-bottom: 1px solid rgba(0.0.0.0.1);
}
.right-key-menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  font-size: 12px;
  color: # 444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0.0.0.0.15);
  box-shadow: 0 6px 12px rgba(0.0.0.0.175);
  white-space: nowrap;
  z-index: 1000;
}
.rightKeyMenuItem:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>
Copy the code

Use the rightKeyClick component. We need to listen for the user’s right click on the table row, which is already available in the elementUI table:

Row – ContextMenu This event is triggered when a row is right-clicked (Row, column, event)

Trigger this method and pass the parameters. Change the value of Visable to make menu bar components visible.

In the menu bar component, we modify the height of menu appropriately by obtaining the Y-axis position of the browser when clicked. So when we click on different table rows. The menu position also changes as the mouse clicks away from the browser’s Y-axis.

// business-table
<template>
<div>
<el-table
 :data="tableData"
  @row-contextmenu="rowContextmenu"
  border>/ /... ignore</el-table>
<rightKeyMenu v-if="visable"
              @rightClick="rightClick" 
              ref="menu" 
              @edit="handleEdit"
              @del="handleDel">
              </rightKeyMenu>
 </div>
</template>
import rightKeyMenu from '@component/right-key-menu/index'
export default {
   components: {
      rightKeyMenu
    },
    methods: {
      rowContextmenu (row, column, event) {
        // If it has been opened before, close it.
          this.visable = false
        setTimeout(() = >{
          this.visable = true
        },300)
        // Prevents right-click from default behavior
        event.preventDefault()
        this.$nextTick(() = > {
          this.$refs.menu.onload(row,column,event)
        })
      },
      rightClick() { 
        this.visable = false
        // Cancel the mouse listening event menu bar
        document.removeEventListener('click'.this.rightClick)
      },
      handleEdit () {
        / /.. do something
      },

      handleDel () {
       / /.. do something}}}Copy the code

Sometimes the action items in a list are not limited to just modifying and deleting. So we can use slots to customize what we want to display.

<template>
  <div id="right-key-menu" class="right-key-menu">
    <div class="rightKeyMenuItem" @click="$emit('edit')">The editor</div>
    <div class="rightKeyMenuItem" @click="$emit('del')">delete</div>
    <div class="rightKeyMenuItem"><slot name="more"></slot></div>
  </div>
</template>
Copy the code

At this point. Element’s right-click menu is complete. The most important aspect of implementing this requirement is to calculate the location of the right-click menu. The rightKeyClick component also needs to pass several parameters to optimize the fit because the table is located differently on different pages. I won’t go into details here. You can try it yourself.

The last

If the article has the inadequacy place, also invites everybody to criticize to point out.

Thank you for watching this article hope to give a 👍 comment collection three even! Your likes are my motivation to write.