需求:
- 鼠标右击显示菜单
- 菜单分组显示,中间用横线隔开
- 鼠标悬浮在具体菜单内容时添加背景色
- 菜单显示在光标附近,默认显示在右下侧,要考虑边缘情况
- 左击菜单关闭
- 选中内容后菜单关闭
我们将显示的菜单写成一个组件
父组件中右击,在光标附近显示子组件
子组件 context-menu.vue
我们从最简单的开始,完成以下功能:
- 菜单分组,并用横线分割;
- 鼠标悬浮时添加背景色;
- 点击内容时,将选中值传到父组件。
<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>
完成基本