动手做一个 vue 右键菜单

有一个vue的右键菜单的需求，先上网查了一下是否有插件，比如下面这个

1分钟Vue实现右键菜单

https://www.jb51.net/article/226761.htm

一顿操作之后，页面白屏，控制台报错，后来分析，大概应该是不适用vue3？ 

vue-contextmenu

关于这个插件在网上找了很多用法，都以失败告终。

还是自己动手造轮胎吧，正好也没做过这种东西。

先上效果图：

（仿windows桌面右键菜单，当然，没做快捷键功能）

还有个夜间主题： 

思路：

内容大致分为两部分：

1、菜单列表

（1）数组数据，展示菜单项

（2）坐标控制显示

（3）显示开关

（4）子菜单

（5）定制主题

（6）下级菜单展示位置 处理

2、菜单项

（1）显示图标，文字，是否存在下级菜单（箭头）

（2）点击或禁用

（3）点击函数

（4）点击菜单项，关闭整个菜单后，执行对应函数

。。。。。。。。

代码如下：

RightMenu.vue

定义一个组件入口，规范并处理入参。

RightMenuList.vue

将主菜单列表，子菜单列表 抽象出来，作为一个菜单列表组件，该组件只负责根据指定坐标进行显示列表，隐藏。

RightMenuItem.vue

将菜单项抽象为一个组件，主要负责展示图片文字，点击事件，是否禁用等功能，

如果该菜单项下存在子菜单项，则要负责计算子菜单显示的坐标，也需要控制子菜单的显示和隐藏

RightMenuItemIcon.vue

这里将菜单项的展示图标单独抽象出来，为的是兼容多模式展示。可以自行定义。如base64编码，http地址，图片文件，svg代码，空白，还有根据不同主题显示不同类型的图标等等。

* b-icon是自定义的一个svg处理组件，可以删除，修改。

一共四个文件，可以直接删去最后这个文件，不使用。

测试用例：

 API

 入参

使用方式（属性名）	解释	类型
v-model	显示状态，坐标	Object
:data	菜单数据	Array
theme	主题名	String

 v-model  菜单设置

参数名	解释	类型
status	显示状态	Boolean
x	横坐标	Number
y	竖坐标	Number

:data    数组类型，数组项内容如下

参数名	解释	类型
name	菜单名称	String
icon	type   图标类型	String
	value   值	String
click	点击事件	function
outline	该菜单项下面是否显示分割线，默认true	Boolean
enable	是否可点击，默认true	Boolean
child	子菜单数据数组	Array

theme  主题

枚举	解释
light	亮色主题
dark	暗色主题

自定义主题，可以在代码中仿照已有的两个主题样式 新增自定义css样式即可。

遇到问题请提问