简介
先来看最终成果:
操作逻辑为:
- 点击
...
弹出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