前言
这是一套直面产品的【练习题】
这是一套可以直接用的【面试题】
对于求职者，这是一道可以让你的八股文付诸于实践的题，让你写的代码都有用。
对于公司，你可以用它来测出求职者的真实水平。
关于本题
应用场景：通用类型组件，绝大场景下都能使用
涉及到的知识：FLEX布局Fixed定位鼠标事件树形结构树形组件碰撞检测
限制：不能使用任何UI组件，JS库，如JQUERY，可使用CSS插件或库,样式与设计图贴近
等级任务
初阶
1-1*：控制台，不能有任何警告和报错，不能清空控制台
1-2：建议元素之间的间距为8px，不做强制约束，文本是弹性空间，可长可短
1-3：文字左侧灰色色块为ICON，需要预留空间，可以用任意背景色代替
1-4*：鼠标移动到菜单，对应的一行，需要用浅蓝色 #d9ebff 高亮，图标颜色变成白色
1-5*：灰色文字代表禁用，鼠标不能点击
1-6*：任意一行菜单都有对应的事件
1-7*：禁用浏览器原生菜单，进入页面时，菜单处于隐藏状态，鼠标右键事件后显示
1-8*：根据JSON渲染菜单
设计图如下
中阶
2-1：基于上面的所有条件，完成下面任务
2-2：如果有子菜单，则显示箭头图标，否则不显示
2-3：可以在任意菜单下方配置分割线.
2-4：点击【菜单】外部隐藏菜单
2-5：支持多级菜单
2-6：页面样式稳定
2-7：像素必须与原型图保持一致【可选】
设计图如下
高阶
3-1：基于进阶任务完成下述功能
3-2*：将上述功能封装成 [Vue,React,js]或其他框架的组件，可高复用，对空值等异常需要做优化处理
3-3*：任意菜单都能配置子菜单，任何子菜单都能配置图标
3-4*：在靠近窗口点击时(右,下方)，所有DOM都不能超出窗口，需要将子菜单移至左侧显示，如有三级菜单，则移至二级菜单左侧
3-5*：能结合业务逻辑使用，如：在表格数据中，右键点击任意一项数据，弹出菜单，能正确的对其进行增删改查等基本操作
3-6：能将该组件发布到NPM
3-7：能在各大主流浏览器中运行，组件不能有副作用
设计图如下
资源
获取图标
原设计图
示例效果
暂无链接
如有意愿可提交仓库地址给我，将会展示在这儿
