简介

我们先来看看最终结果：

操作逻辑是：

点击.弹出上下文菜单；单击非上下文菜单区域隐藏上下文菜单；单击上下文菜单中的任何选项；隐藏上下文菜单；思考

项目是基于vux的，本来想偷懒直接在vux库中翻组件，但是看了一圈，vuex里没有这样的通用组件！然后我去打开源码解决方案，看了几个库，还行，但是这个时候前端哥来了，说没必要用这么重的东西来实现这个菜单，直接写就行了。

当时，我正在考虑将上下文菜单封装到一个组件中，并通过数据配置的方式动态扩展菜单选项。但是没想到前端哥直接给我做，所以没必要打包。此组件过于依赖页面。就算打包了，下次可能也不会直接用了，PM的思维就是这么奇怪。

所以最后要做的就是直接硬化。

实现

调整操作逻辑

这个页面是通俗意义上的列表显示页面，使用vux的swipeout表单组件为用户提供侧滑操作，需要删除之前写的侧滑功能。

调整用户界面

在调整UI的过程中，感觉CSS充满了恶意。当然，我是这么说的，但其实还不够熟，因为太久没用了。花了很大力气才最终调整了新的UI。这时，一整天过去了，我非常想念autoLayout。

上下文-mune

在正式开始写作之前，如上所述，我一直在打开源数据库，主要是因为我不知道如何开始写作。上次写vue已经快两个月了，不知道怎么写组件，浪费了一些时间在上面。最终的解决方案让我大吃一惊：

div class=' more-menu-wrapper ' ul v-show='项目。show option' liChange分类/Li Li向上/Li Li移动到顶部/Li Li取消收藏/li /ul/div没想到是用无序列表完成的~在iOS中，我很纠结于UITableView和UIStackView。当然，这是唯一行不通的方法。调整UI后发现.与上下文菜单“合并”，而没有设计图中的“暂停”效果。最终的解决方案是：更多包装{ /*.*/position:绝对值；更多菜单包装{ position: relative/* .*/}}继续调整CSS时，发现上下文菜单会被其父组件遮挡，上下文菜单的显示范围会被限制在其父组件的显示高度。最后，你知道溢出是设置overflow:隐藏在底层父组件中的属性；将其删除，并使其成为默认可见，这可以显示为上下文菜单的高溢出效果。

事件绑定

UI调整后，开始绑定事件。因为只是对UI进行改造，不涉及太多新的逻辑，所以很快就写出了下面的代码：

Ul v-show='项目。show option ' Li @ click=' move item(item)'更改分类/li li @click='moveUp(item)'上移/li li @click='setTop(item)'移到顶部/Li li @click='deleteItem(item)'取消收藏/Li/ul上下文菜单的显示取决于v-show。当web数据第一次从页面中拉出时，隐藏在上下文菜单显示中的初始化标志项. showOption=false被添加到数据中每个列表数据的项中，并且项. showOption的变化在这四种输入方法中被控制：

//.moveUp(item){ item . show option=false；//.}//.刷新页面，愉快地看到上下文菜单的显示，但是当你点击菜单选项时什么也没发生！一开始我以为是星座位问题，但好像没什么问题。

本来想去前端哥那里看看，但是一直没在工作站。最后问了同组的前端实习生。他认为数据更新时没有添加item.showOption字段，导致后续的直读不存在。

投球打颤，肌肉发达的同性恋打颤

div-click-outer=' OnClick outer ' p…/p！-要点-div : id=' item . metric id ' v-show=' item . show option ' ul Li change分类/li！-.-/ul/div/divonclick outer(event，El){ let query instance=El . queryselector('。more-menu-wrapper ')if(query instance){ let metricId=El . queryselector ' .“更多-菜单-包装”)。id；if (metricId！=' '){ this . listdata . some((item)={ if(item . metricId==metricId){ item . show option=false；返回真；} });}}}将上下文菜单的id设置为标识符，然后在v-out-click的指令方法中获取id，通过这个id在数据源中找到对应的项，然后设置item.showOption=false隐藏上下文菜单。

摘要

这是第一个通过转动前端完成的功能，因为不熟悉会导致中间出现一些有趣的东西。客户端和前端的发展历程不大，但绝对不可能说不，在一些小问题上，如果不踩坑或者身边没有大佬，真的会爬不起来或者弃坑。归根结底，你还需要学习更多！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。