终于给网站添加了顶部菜单tab切换的功能

ppylox
·8/20/2022·4 阅读
AI 摘要模型根据正文自动生成,仅供参考

作者为网站后台管理新增顶部菜单Tab切换功能。核心实现包括:Tab删除时获取当前索引,用splice(index,1)删除对应数据,注意参数顺序;点击左侧菜单添加Tab时,先判断数据中是否已存在该菜单,不存在则Push新增,存在则让对应Tab获得焦点。该功能不影响主流程,优先级较低,故此前搁置。源码见Gitee仓库vueAdmin。

大家好我是图恩,今天终于想起来给网站(www.dsiab.com)的后台管理添加了顶部的菜单tab切换功能,之前一直有记得这个事情,但是这个又不是一个影响操作的功能所以就被搁置了,在实际的开发中也是如此,如果一个功能不影响整个流程,那么它的优先级是低的,可以后续酌情添加。

当然由于这个功能是自己的网站,所以什么要加什么时候加都是看我的时间,之前的一直没实现是因为它不重要,因为不重要所以在所有的开发计划中它的位置是靠后的,我会优先实现那些优先级高的功能。

今晚抽空看了一些逻辑,就简单地实现了这个功能,需要注意的点就是在tab切换的时候跟tab删除的时候数据的处理,因为这个因为涉及到数据的删除,所有需要仔细考虑。

删除的逻辑就是获取当前删除的索引,然后通过splice(index,1)删除对应索引的数据,index为点击删除的索引,1为删除的个数,这个地方要注意位置不要写反了。

还有一个需要注意的地方就是tab的添加,点击左边菜单的时候,先判断tab数据有没有点击的菜单,如果没有就Push,如果有就让点击的菜单tab获得焦点。

具体的实现代码可自行下载源码(https://gitee.com/wilkwo/vueAdmin.git)后看我具体的实现,本身功能也比较简单,就是数据的时候需要花点时间。

相关文章