38 lines
867 B
Vue
38 lines
867 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="visible"
|
||
|
|
:style="{ position: 'fixed', top: y + 'px', left: x + 'px', zIndex: 9999 }"
|
||
|
|
class="custom-context-menu"
|
||
|
|
@click.stop
|
||
|
|
>
|
||
|
|
<div class="menu-item">• Output Real-time Data</div>
|
||
|
|
<div class="menu-item">• Input Sampling Data</div>
|
||
|
|
<div class="menu-item">• 설비가동시간</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineProps<{ visible: boolean; x: number; y: number }>();
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.custom-context-menu {
|
||
|
|
background: #fff;
|
||
|
|
border: 2px solid #bbb;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||
|
|
padding: 8px 0;
|
||
|
|
min-width: 180px;
|
||
|
|
}
|
||
|
|
.menu-item {
|
||
|
|
padding: 8px 16px;
|
||
|
|
margin: 4px 0;
|
||
|
|
background: #f5f5f5;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 1rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 0.2s;
|
||
|
|
}
|
||
|
|
.menu-item:hover {
|
||
|
|
background: #e0e0e0;
|
||
|
|
}
|
||
|
|
</style>
|