共计 2332 个字符，预计需要花费 6 分钟才能阅读完成。
这周在我的项目中须要实现一个相似于 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 的痛 ….）