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

<template>
  <div class="context-menus-container"
       v-if="contextMenu.show"
       @click="close">
    <ul class="context-menu"
        :style="styleParam">
      <li v-for="(item, index) in list"
          :key="index"
          @click.stop="choose(item)">{{item.lable}}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, watch, watchEffect, ref, reactive } from 'vue';
import { ContextMenuTemp } from './interface';
import { BtnListType } from '@/common/components/btnList/interface';

export default defineComponent({
    name: 'context-menu',
    props: {
        contextMenu: {
            default: {
                position: { clientX: 0, clientY: 0 },
                show: false,
            },
            type: Object as PropType<ContextMenuTemp>,
        },
        list: {
            default: [],
            type: Array as PropType<BtnListType[]>,
        },
    },
    setup(props, context) {
        function choose(item: BtnListType) {
            console.log(`${item.lable}:${item.code}`);
            context.emit('cancel', item);
        }
        function close() {
            context.emit('cancel', null);
        }
        const styleParam = reactive<{ left: string; top: string }>({ left: '0px', top: '0px' });
        watchEffect(() => {
            if (props.contextMenu.show) {
                styleParam.left = `${props.contextMenu.position.clientX}px`;
                styleParam.top = `${props.contextMenu.position.clientY}px`;
                console.log(styleParam);
            }
        });
        return { choose, styleParam, close };
    },
});
</script>

<style lang="less">
.context-menus-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.context-menu {
    min-width: 100px;
    user-select: none;
    position: fixed;
    background-color: @m-black25;
    z-index: 999;
    border-radius: 2px;
    border: 1px solid @m-black17;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    cursor: pointer;
    li {
        padding: 6px;
        color: @m-grey2;
        font-size: 16px;
        border-bottom: 1px solid @m-black17;
        text-align: center;
        &:hover {
            color: @m-white1;
            background-color: @m-grey26;
        }
    }
}
</style>;