48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
ref="contextMenu"
|
|
class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-50 p-1"
|
|
v-show="show"
|
|
:style="contextMenuStyle"
|
|
@contextmenu.prevent
|
|
@click="closeContextMenu"
|
|
>
|
|
<component :is="component_ref" :data="data" />
|
|
<!-- <template v-for="item in contextMenu" :key="item">
|
|
<hr v-if="item.separator" />
|
|
<div v-else class="flex flex-row gap-2 rounded-md p-1 px-2 items-center"
|
|
:class="typeof item.click == 'function' ? 'cursor-pointer hover:bg-gray-200' : ''" @click="item.click">
|
|
<font-awesome-icon v-if="item.icon" class="text-md" :icon="[item.stroke || 'far', item.icon]" />
|
|
<span class="font-normal">{{ item.title }}</span>
|
|
</div>
|
|
</template> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mapState, mapActions } from "pinia";
|
|
import { useContextMenuStore } from "@/stores/context-menu";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
computed: {
|
|
...mapState(useContextMenuStore, ["show", "contextMenuStyle", "component_ref", "data"]),
|
|
},
|
|
methods: {
|
|
...mapActions(useContextMenuStore, ["closeContextMenu"]),
|
|
},
|
|
mounted() {
|
|
document.body.addEventListener("click", (event) => {
|
|
if (!(this.$refs.contextMenu as HTMLElement)?.contains(event.target as HTMLElement)) {
|
|
this.closeContextMenu();
|
|
}
|
|
});
|
|
// document.body.addEventListener("contextmenu", (event) => {
|
|
// if (!this.$refs.contextMenu?.contains(event.target)) {
|
|
// this.closeContextMenu();
|
|
// }
|
|
// });
|
|
},
|
|
};
|
|
</script>
|