vue--右击菜单的简单实现

关键代码：

<template>
<div @contexmenu.prevent.native="createRightMenu($event)">菜单</div>
<div id="rightMenu" v-clickoutside="handleClose">
    // 可添加菜单内容
    <el-button>编辑</el-button>
    <el-button>删除</el-button>
</div>
</template>

import Clickoutside from "element-ui/src/utils/clickoutside "
<script>
    data: {
        showRightMenu: false
    }   
    directives: { Clickoutside }
    methods: {
        createRightMenu(event) {
          let right = document.getElementById('rightMenu')
          right.style.position = "absolute"
          right.style.left = event.pageX + 20 +'px'
          right.style.right= event.pageY - 20 +'px'
          this.showRightMenu = true
        },

        handleClose() {
            this.showRightMenu = false
        }
    }
</script>