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>
 |