<template>
? <div class="ContextMenu" @click="close" v-show="show">
? ? <ul class="menuMain" ref="menuMain" :style="{ top: y, left: x }">
? ? ? <slot></slot>
? ? </ul>
? </div>
</template>

<script>
export default {
? name: "ContextMenu",
? mounted() {
? ? document.addEventListener("contextmenu", this.contextClick);
? },
? data() {
? ? return {
? ? ? x: "0px",
? ? ? y: "0px",
? ? ? show: false
? ? };
? },
? methods: {
? ? //右鍵事件
? ? contextClick(e) {
? ? ? //阻止默認(rèn)事件
? ? ? e.preventDefault();
? ? ? this.show = true;
? ? ? this.x = e.clientX + "px";
? ? ? this.y = e.clientY + "px";
? ? },
? ? close(e) {
? ? ? //判斷點(diǎn)擊區(qū)域是否是menuMain的子元素 如果不是則關(guān)閉菜單
? ? ? if (!this.$refs.menuMain.contains(e.target)) {
? ? ? ? this.show = false;
? ? ? }
? ? }
? }
};
</script>

<style lang="less" scoped>
.ContextMenu {
? position: fixed;
? width: 100vw;
? height: 100vh;
? top: 0;
? left: 0;
? .menuMain {
? ? position: fixed;
? ? z-index: 100000;
? ? list-style: none;
? ? border-radius: 10px;
? ? padding: 0;
? ? margin: 0;
? ? background-color: #f5f5f5;
? ? overflow: hidden;
? ? li{
? ? ? padding: 20px;
? ? ? cursor: pointer;
? ? ? &:hover{
? ? ? ? background-color: #bdbdbd;
? ? ? }
? ? }
? }
}
</style>

<context-menu>
? ? <li>hello</li>
? ? <li>hello</li>
</context-menu>