CatchLight的博客

之前的两篇文章，一篇实现了tab页的新增，一个讲了如何实现滑动块，本篇就来讲一下如何实现tab的关闭，以及tab关闭时滑动块的变换情况。关闭的是滑动块所在的tab，即被激活的tab关闭的是非滑动块所在的tab如何区分是不是滑动块所在的tab呢，用关闭tab的route.path与一比较就可以了。代码看下图：首先直接调用状态变量navTabs的closeTab，看看closeTab是如何定义的.})tabsView。

上一篇主要讲了如何动态添加导航栏的tab，那么本篇将会写如何关闭tab、实现滑动块已经一些细节上的操作。这是实现新增、关闭等功能后的tabs.vue，里面绑定的方法逻辑都是我基于BuildAdmin重构实现的，后面在讲滑动块的时候，可以回来看看图中html的代码。首先就是利用reactive来定义响应式的activeBoxStyle变量，定义两个属性，一个是width表示宽度，另一个trasnform是元素转换，滑动块实在水平轴上进行来回变换，所以就用translateX。})

之前的几篇文章都是基于comtainer布局的aside边栏部分来写的，像logo、menu以及Icon图标组件，后面也写了关于路由动态加载和菜单渲染的文章。今天就撤离aside，来讲一下header部分的实现。使用pinia定义了一个的路由信息状态，方便各个组件修改路由的状态。之前在路由动态加载中就提到过，在router.ts工具类中，通过将处理好的菜单路由放到了中，然后渲染menu。是实现tabs的三个变量。activeRoute表示当前激活的路由是哪个，这样才能利用route.push。

在后台管理系统或者前端页面的切换过程中，总会遇到网络波动、数据加载慢导致的页面访问慢的问题。我们在访问一些网站，遇到页面加载不出来的时候，通常显示一个进度条，或者一个loading页面的动画页面。那么，进度条和loading页面是如何实现的呢？这就是BuildAdmin中进度条和Loading页面的实现，主要是对router路由导航守卫的一个结合使用。

大数据毕业设计之前端

仙路尽头谁为峰，一见无始道成空。

说到图标，在BuildAdmin中用到的地方很多。比如上一篇中的折叠图标，还有菜单栏图标、导航菜单栏图标等。常见的图标有：ElementUI图标、font-awesome、iconfont阿里图标以及本地svg这四类图标。在使用四种不同的图标时，使用的标签都是不一样的，所以定义一个统一的组件，使用一个标签就能包含四类图标是非常有必要的。当然，这只是其中的一个原因，至于其他原因可以接着看下文。这里先放出架构图，可以看完整篇文章之后再回来看。使用。

上一篇文章中，借助aside的实现讲了一些开发的小技巧，以及css的解读。本篇文章主要写一下如何填充aside的内容。aside主要是由两个部分组成的：logo和菜单。实现logo和菜单在点击图标时，菜单和logo会进行折叠封装图标组件本篇文章主要写的是logo和menu的实现。其中menu后面菜单的渲染、动态路由是BuildAdmin的一个重点，后面会用很大的篇幅去写。下一篇先写组件，毕竟后面的很多地方都用到了图标。

上一篇主要讲了我学习前端的一个经历，以及为什么选择BuildAdmin作为深入前端学习的原因.同事也大致聊了一下学习前端需要使用哪些技术栈。本篇文章来拆解一下BuildAdmin的前端代码结构，和布局实现的细节。第二篇开篇主要讲了项目的创建和环境变量的安装。后面阐述了边栏aside的设计思路，以及对css的定义和解读。只涉及了基本的vue和ElementUI的使用。同时，本篇文章提及的控制台查看属性的技巧，下一篇主要讲的菜单渲染，将会涉及vue-router等技术。

毕业设计中前端的开发也是必不可少的，根据BuildAdmin项目深入学习前端的技术。