MTP2.0_WEB/src/common/components/contextMenu/index.vue

<template>
  <!-- 右键 -->
  <div class="context-menu-container"
       @click="updateContextMenu(false)"
       @contextmenu.prevent="onContextMenu">
    <slot></slot>
    <contextMenu :contextMenu="menuContext"
                 @update="updateContextMenu" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive } from 'vue';
import contextMenu from './contextMenu.vue';
import { ContextMenu, MenuItem } from './interface';

export default defineComponent({
    name: 'context-menu-container',
    props: {
        contextMenuList: {
            default: [],
            type: Array as PropType<MenuItem[]>,
        },
        tableList: {
            default: [],
            type: Array as PropType<any[]>,
        },
        selectedRow: {
            default: null,
            type: Object,
        },
    },
    components: {
        contextMenu,
    },
    setup(props) {
        const menuContext = reactive<ContextMenu>({
            position: { clientX: 0, clientY: 0 },
            show: false,
            menuList: props.contextMenuList,
            selectedData: props.selectedRow,
        });

        function onContextMenu(value: MouseEvent) {
            const target = value.target as any;
            // 获取点击表格的 tr  所在的 索引位置
            const index = target.parentElement.rowIndex;
            // 过滤右键表头
            if (index) {
                const { clientX, clientY } = value;
                Object.assign(menuContext.position, { clientX, clientY });
                menuContext.show = true;
                // menuContext.selectedData = props.tableList[index - 1];
            }
        }
        // 关闭右键弹窗
        function updateContextMenu(value: boolean) {
            menuContext.show = value;
        }
        return { menuContext, onContextMenu, updateContextMenu };
    },
});
</script>

<style lang="less">
.context-menu {
    min-width: 100px;
    user-select: none;
    position: fixed;
    background-color: #282e34;
    z-index: 999;
    border-radius: 2px;
    border: 1px solid #2e3539;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    cursor: pointer;
    li {
        padding: 6px;
        color: #88a0ae;
        font-size: 16px;
        border-bottom: 1px solid #2e3539;
        text-align: center;
        &:hover {
            color: #e5e5e5;
            background-color: #343e48;
        }
    }
}
</style>;