深入理解使用深入理解使用Vue实现实现Context-Menu的思考与总结的思考与总结
主要介绍了使用Vue实现Context-Menu的思考与总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
简介简介
先来看最终成果：
操作逻辑为：
点击 ... 弹出 context-menu;
点击非 context-menu 区域，隐藏 context-menu；
点击 context-menu 中的任何一个选项，隐藏 context-menu；
思考思考
项目是基于 vux 做的，本想着偷懒直接在 vux 库翻组件用，但看了一圈下来，居然这么通用的组件在 vuex 中没有！接着又去翻开源的解决方案，看了几个库还算 ok，但此时前端小
哥来了，说实现这个菜单不需要用到这么重的东西，直接写就行了。
当时我的脑海中在思考了把 context-menu 封装成一个 component ，通过数据配置的方式动态拓展菜单选项。但没想到前端小哥直接给我干了回来，没必要进行封装，这个组件对页
面依赖性太强，就算封装完了下次也不一定能直接用，PM 的思路又这么清奇。
所以，最后的做法就直接硬上了。
实现实现
调整操作逻辑调整操作逻辑
该页面是一个通俗意义上的列表展示页，使用了 vux 的 swipeout 表单组件，给用户提供了侧滑操作，需要把原先写好的侧滑功能删除。
调整调整 UI
在调整 UI 的过程中我感到了 CSS 满满的恶意，当然说是这么说，但实际上还是因为太久没有用而导致的不够熟悉。非常费劲的终于调整了好了新 UI，此时已经过去了整整一天了，
非常怀念 autoLayout 。
context-mune
在正式开始写之前，上文已经说了我一直在翻开源库，主要是不懂得如何下手去写。距离上一次写 vue 已经过去快两个月了，而且也没搞清楚如何写一个组件，所以中间有一段时间
浪费在了这上。最后的解决思路让我感到意外：
<div class="more-menu-wrapper">
<ul v-show="item.showOption">
<li>更换分类</li>
<li>向上移动</li>
<li>移至顶部</li>
<li>取消收藏</li>
</ul>
</div>
没想到使用无序列表就可以完成了～在 iOS 中，我会在 UITableView 和 UIStackView 中纠结。当然只有这样是不行的，当又调整了 UI 后，发现 ... 和 context-menu “融合”在了一
起，没有设计图中的“悬浮”效果，最后的解决方法是：
评论0