这周在我的项目中须要实现一个相似于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来强制转换一下。

5.咱们拿到的数组外面其实是包含最初的滑块div的，然而那个滑块并不需要，所以再优化，剪切一下，把滑块从数组中去掉。tabs即为咱们两个题目div组成的数组。

为了清晰一点，咱们打印一下tabs。

6.上面的代码就用到了咱们传递的参数，currentItem的目标，你能够简略了解为以后div的index。（其实这里用的是enum，这个场景和index的作用相差无几）

7.ok，咱们当初只须要晓得滑块应该滑动的间隔就行了。

这里咱们用到了offsetLeft和clientWidth，咱们先解说这两个到底是个什么货色。

一.额定技能补充----offsetLeft

咱们先看MDN是如何介绍的

这里提到了，返回以后元素左上角绝对于offsetParent左边界偏移的值。咱们先打印一下userClickItem来看看它身上的这个属性。是不是很相熟，对没错，这个offsetParent就是它父元素wrapper，然而这个属性并不一定就是指的父元素。怎么了解呢？

当咱们把wrapper的position:relative删除后，再打印看一下。

是不是感觉有分明了呢？

MDN的解释，更加艰深的来说应该是绝对于最近的具备绝对定位属性的父元素的.....

ok，当初咱们offsetParent搞明确是什么货色了

咱们持续了解这个画线的句子，这里用图形解释比拟好。这里为了直观的解释，咱们给wrapper加上一个padding为20px

咱们这时候再打印一下userClickItem

什么意思呢？

其实指的就是这里的间隔。

咱们为什么要晓得offsetLeft呢？这里咱们是为了给当前调整款式的时候留下伏笔，万一当前咱们须要调整一下wrapper的margin和padding咱们的滑块是不会受到影响的，因为咱们就是基于这个值来计算的。

二.额定技能补充----clientWidht

假如咱们不给咱们的题目div加padding属性，那么这时候它的值就是咱们content也就是内容区的宽度。让咱们给题目加上宽度的时候，它指的就是content宽度加padding的宽度。

1.让咱们验证一下，先来打印一下没有padding的状况。

后果如下:

2.咱们加上padding再试一下。

四.滑块的初始地位与点击挪动

ok！这里咱们晓得了clietnWidth和offsetLeft什么意思了，咱们拿到这两个值有什么用呢？

咱们的滑块自身就是绝对于wrapper来滑动的，它的终点其实是wrapper的最右边,它的初始地位如果是下面的的calcOffset的话，那不就正好在第一个题目的正下方了吗？

ok，定义一个变量接管一下即可。

解释一下，这个7.5是我微调的一下，并没有什么实质性的起因。

而后咱们设置一个:style是一个计算属性滑块style

与滑块的div绑定即可。

组件刚挂载的时候就让滑块挪动到正确的地位。

五.字体大小的切换

这个比较简单，大抵说一下原理，因为咱们能拿到用户点击的那个div和全副的div数组，咱们在每次点击的时候，将用户拿到的div的fontSize变大，并且筛选出剩下的div，使其fontSzie恢复正常即可。

至于剩下一些小的款式和其余，这里不过多赘述，外围就是下面的思路。

至此咱们根本实现了github主页的那个成果。

留神，咱们的滑块可是滑过去的哦，并不是间接呈现在题目下方的。（不会录制gif的痛....）