这周在项目中需求完成一个类似于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的痛….）
