<template>
|
<transition name="el-zoom-in-center">
|
<div
|
aria-hidden="true"
|
class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
|
role="tooltip"
|
data-popper-placement="bottom"
|
:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;width:${width}px`"
|
:key="Math.random()"
|
v-show="state.isShow"
|
>
|
<ul class="el-dropdown-menu">
|
<li
|
v-for="(v, k) in dropdownList"
|
v-show="v.show ?? true"
|
class="el-dropdown-menu__item"
|
aria-disabled="false"
|
tabindex="-1"
|
:key="k"
|
@click="v.click"
|
>
|
<SvgIcon :name="v.icon" />
|
<span>{{ v.txt }}</span>
|
</li>
|
</ul>
|
<div class="el-popper__arrow" :style="{ left: `${state.arrowLeft}px` }"></div>
|
</div>
|
</transition>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, reactive, onMounted, onUnmounted, watch, PropType, toRefs } from 'vue';
|
import { DropdownListType } from './types';
|
|
// 定义父组件传过来的值
|
const props = defineProps({
|
mousePosition: {
|
type: Object,
|
default: () => {
|
return {
|
x: 0,
|
y: 0,
|
};
|
},
|
},
|
dropdownList: {
|
type: Array<DropdownListType>,
|
default: () => {
|
return [];
|
},
|
},
|
/** @description Dropdown 下拉菜单的宽度 */
|
width: {
|
type: String,
|
default: () => {
|
return '117';
|
},
|
},
|
});
|
|
const { mousePosition, dropdownList } = toRefs(props);
|
const numWidth = computed(() => {
|
return parseInt(props.width);
|
});
|
|
// 定义变量内容
|
const state = reactive({
|
isShow: false,
|
|
arrowLeft: 10,
|
});
|
|
// 父级传过来的坐标 x,y 值
|
const dropdowns = computed(() => {
|
if (mousePosition.value.x + numWidth.value > document.documentElement.clientWidth) {
|
return {
|
x: document.documentElement.clientWidth - numWidth.value - 5,
|
y: mousePosition.value.y,
|
};
|
} else {
|
return mousePosition.value;
|
}
|
});
|
|
// 打开右键菜单
|
const openContextmenu = () => {
|
state.isShow = true;
|
};
|
// 关闭右键菜单
|
const closeContextmenu = () => {
|
state.isShow = false;
|
};
|
// 监听页面监听进行右键菜单的关闭
|
onMounted(() => {
|
document.body.addEventListener('click', closeContextmenu);
|
});
|
// 页面卸载时，移除右键菜单监听事件
|
onUnmounted(() => {
|
document.body.removeEventListener('click', closeContextmenu);
|
});
|
// 监听下拉菜单位置
|
watch(
|
() => mousePosition.value,
|
({ x }) => {
|
if (x + numWidth.value > document.documentElement.clientWidth) state.arrowLeft = numWidth.value - (document.documentElement.clientWidth - x);
|
else state.arrowLeft = 10;
|
},
|
{
|
deep: true,
|
}
|
);
|
|
// 暴露变量
|
defineExpose({
|
openContextmenu,
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.custom-contextmenu {
|
transform-origin: center top;
|
z-index: 2190;
|
position: fixed;
|
.el-dropdown-menu__item {
|
font-size: 12px !important;
|
white-space: nowrap;
|
i {
|
font-size: 12px !important;
|
}
|
}
|
}
|
</style>
|
