这周在项目中需要实现一个类似于github顶部标题的效果，如下图
主要效果为：当用户点击的时候，底部出现黑色的细线，并且当前项目的字体变粗。感觉这种场景很多，特来记录一下实现过程。
接下来我会一步步讲解去实现它。
一.基础样式和设计思路
我们稍微调整一下布局(这里我使用的是tailwind.css)，本篇主要内容不是介绍css的，所以一些样式的知识点需要读者自己去查阅。
这里我的设计思路是这样的，假设当前我的页面有两个选项卡，当用户点击某一选项卡的时候，下面的韩字会移动到相应的位置，且当前元素的字体会变大。
二.优化一下代码
为了更接近真实项目的数据，我们把上面的数据再包装一下。
1.enum最常见的使用场景就是，在某个列表具有某些固定值。再举个更简单的例子，加入你在做一款游戏，游戏的方向只有上下左右四个方向。那么我就可以定一个enum。如下
在进行一些判断的时候，就可以用这样的形式来if(currentDirection!==direction[0])，代表着如果当前方向不为TOP时，执行哪些函数。 并且代码具有相对的提示。具体的原理可以去看TS官网哦。这里不过多赘述。
2.这里的data一会要用来v-for,动态打印出我们列表，action一会要用来传递点击事件的参数，它并不是我们要用来在视图上展示的。
3.最终改造的数据也很简单，就是很简单的v-for
这样做的好处在于，即使后期我们需要添加一个额外的标题，我们只需要在数组data里添加即可，并且页面也不会出现很大的错乱，对后来接手你代码的人也很友好。
三.设计点击事件
1.在这里我们给最外层的divwrapper打上ref，然通过vue的ref拿到它里面的标题div。
2.接下来，是全篇重点：注意听讲！！
看到这一堆代码，不要慌，我们一步一步分析。
3.首先函数名,handelClickItem用户点击元素，这个函数的参数即是用户到底点击的是哪一个标题
我们之前设计的itme.action就是这里需要用到的。（当然这里使用index也行，但是不推荐）。
4.这里的处理的原因是，querySelectorAll这个方法返回的是一个类数组，我们并没有办法直接使用数组的方法，所以用到的了Array.from来强制转换一下。
