右键菜单组件vue——显示在光标跟前

需求：

• 鼠标右击显示菜单
• 菜单分组显示，中间用横线隔开
• 鼠标悬浮在具体菜单内容时添加背景色
• 菜单显示在光标附近，默认显示在右下侧，要考虑边缘情况
• 左击菜单关闭
• 选中内容后菜单关闭
  
  我们将显示的菜单写成一个组件
  父组件中右击，在光标附近显示子组件

子组件 context-menu.vue

我们从最简单的开始，完成以下功能：

1. 菜单分组，并用横线分割；
2. 鼠标悬浮时添加背景色；
3. 点击内容时，将选中值传到父组件。

<template>
    <div class="theContextMenu">
        <div v-for="(list, index) in menuList" :key="index">
            <ul :class="index < menuList.length - 1 ? 'splitLine': ''">  <!---每组后添加下划线（除最后一组）---->
                <li v-for="item in list" :key="item.value" @click="clickMenu(item.value)">
                    {
  {item.label}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
   export default {
        name: 'context-menu',
        data () {
            return {
                menuList: [               // 这里使用两层数组进行分组
                    [{label: 'menu1', value: 'menu1'}],
                    [{label: 'menu2-1', value: 'menu21'}, {label: 'menu2-2', value: 'menu22'}],
                    [{label: 'menu3', value: 'menu3'}]
                ],
           };
        },
        methods: {
            clickMenu (value) {
                this.$emit('on-click-menu', value); // 向上传递
            },
        }
    };
</script>

<style lang="less">
.theContextMenu{
    position: fixed;                 // 设置为绝对定位
    border: 1px solid #ddd;
    border-radius: 0.3rem;
    background: #fff;
    z-index: 1;
    ul{
        padding: 5px 0;
        list-style: none;
        li{
            padding: 5px 10px;
            cursor: pointer;
        }
        li:hover{                      // 鼠标悬浮时添加背景色
            background: #f3f3f3;
        }
    }
    .splitLine{
        border-bottom: 1px solid #e8eaec;
    }
}
</style>

完成基本