JS 右键菜单

右键事件

@contextmenu.prevent.native="openContextMenu($event, node)"

右键事件

//右键自定义菜单
openContextMenu(ev, node) {
    this.contextMenuLeft = ev.x - 320;
    this.contextMenuTop = ev.y - 140;

    this.contextVisible = true;
},

右键菜单

<el-card
                class="contextMenuText"
                v-show="contextVisible"
                :style="{
                  left: contextMenuLeft + 'px',
                  top: contextMenuTop + 'px',
                }"
              >
                <div class="li" @click="deleteNode('删除')">
                  <i class="el-icon-delete"></i>删除
                </div>
                <!-- <el-button class="li" type="text" icon="el-icon-arrow-left">上一页</el-button> -->
                <el-divider></el-divider>

                <div class="li" @click="handleCopyNode">
                  <i class="el-icon-document-copy"></i>拷贝
                </div>
                <div class="li" @click="handleCutNode">
                  <i class="el-icon-scissors"></i>剪切
                </div>
                <div class="li" @click="handlePasteContent($event)">
                  <i class="el-icon-copy-document"></i>粘贴
                </div>
                <el-divider></el-divider>

                <div class="li" @click="handleHorizontalTurn(selectedNode)">
                  <i class=""></i>水平翻转
                </div>
                <div class="li" @click="handleVerticalTurn(selectedNode)">
                  <i class=""></i>垂直翻转
                </div>
                <div class="li" @click="handleSpin(selectedNode)">
                  <i class=""></i>旋转
                </div>
              </el-card>

菜单属性

/**
* 右键自定义属性 **/
.contextMenuText {
    width: 160px;
    background: #fff;
    position: absolute;
    z-index: 999;
}
.contextMenuText >>> .el-card__body {
    padding: 0;
    margin: 10px 0;
}
.contextMenuText .li {
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    cursor: pointer;
    padding: 0 20px;
}
.contextMenuText .li:hover {
    background-color: #ebf5ff;
    color: #3d9cfc;
}
.contextMenuText .li i {
    display: inline-block;
    width: 20px;
}
.contextMenuText >>> .el-divider {
    margin:  0;
}