Vue如何实现深入理解的复杂Context-Menu功能？

本文共计2599个文字，预计阅读时间需要11分钟。

简介：+ 概览最终成果：+ 操作逻辑：+ 点击+弹出context-menu；+ 点击非context-menu区域，隐藏context-menu；+ 点击context-menu中的任意选项，隐藏context-menu；+ 考虑项目是基于vux开发的。

简介

先来看最终成果：

操作逻辑为：

• 点击 ... 弹出 context-menu;
• 点击非 context-menu 区域，隐藏 context-menu；
• 点击 context-menu 中的任何一个选项，隐藏 context-menu；
  

思考

项目是基于 vux 做的，本想着偷懒直接在 vux 库翻组件用，但看了一圈下来，居然这么通用的组件在 vuex 中没有！接着又去翻开源的解决方案，看了几个库还算 ok，但此时前端小哥来了，说实现这个菜单不需要用到这么重的东西，直接写就行了。

当时我的脑海中在思考了把 context-menu 封装成一个 component ，通过数据配置的方式动态拓展菜单选项。但没想到前端小哥直接给我干了回来，没必要进行封装，这个组件对页面依赖性太强，就算封装完了下次也不一定能直接用，PM 的思路又这么清奇。