89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<template>
|
||
<div
|
||
v-if="visible"
|
||
class="context-menu"
|
||
:style="{ top: position.y + 'px', left: position.x + 'px' }"
|
||
>
|
||
<div
|
||
v-for="item in menuItems"
|
||
:key="item.key"
|
||
class="menu-item"
|
||
@click="handleClick(item)"
|
||
>
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, onMounted, onUnmounted } from 'vue';
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
position: {
|
||
type: Object,
|
||
default: () => ({ x: 0, y: 0 })
|
||
},
|
||
menuItems: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
});
|
||
|
||
const emit = defineEmits(['close', 'select']);
|
||
|
||
watch(() => props.visible, (newVal) => {
|
||
if (newVal) {
|
||
document.addEventListener('click', closeMenu);
|
||
} else {
|
||
document.removeEventListener('click', closeMenu);
|
||
}
|
||
});
|
||
|
||
const handleClick = (item) => {
|
||
emit('select', item);
|
||
closeMenu();
|
||
};
|
||
|
||
const closeMenu = () => {
|
||
emit('close');
|
||
};
|
||
|
||
onMounted(() => {
|
||
// 初始监听（如果visible初始为true）
|
||
if (props.visible) {
|
||
document.addEventListener('click', closeMenu);
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
document.removeEventListener('click', closeMenu);
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.context-menu {
|
||
position: fixed; /* 使用 fixed 定位，不受父容器 scroll 影响 */
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
border: 1px solid #eee;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.menu-item {
|
||
padding: 8px 15px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.menu-item:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
</style> |