这周在项目中，需要实现类似github顶部标题的效果。主要效果如下：当用户点击时，底部出现一条细黑线，当前项的字体变为粗体。感觉这样的场景很多，所以把实现过程记录下来。接下来，我将一步步解释如何实现它。1.基本样式和设计思路稍微调整一下布局（这里我使用的是tailwind.css），本文的主要内容不是介绍css，所以需要读者自行查看一些样式知识点。我这里的设计思路如下。假设我的当前页面有两个选项卡。当用户点击某个选项卡时，下方的韩文字符会移动到相应的位置，当前元素的字体会变大。2.优化代码为了更贴近真实项目的数据，我们将以上数据重新打包。1.enum最常见的使用场景是在某个列表中有一定的固定值。再举一个更简单的例子，假设你在做一个游戏，游戏的方向只有上、下、左、右四个方向。然后我可以设置一个枚举。如下，在做一些判断的时候，可以用if(currentDirection!==direction[0])这种形式，表示如果当前方向不是TOP，则执行哪些函数。并且代码有相对提示。具体原理可以在TS官网找到。我不会在这里详细介绍。2.这里的数据会被v-for用来动态打印出我们的列表，action会用来传递点击事件的参数，这不是我们想要显示在view上的。3、最后修改的数据也很简单，就是很简单的v-for的好处是，即使后面我们需要添加额外的标题，也只需要在数组数据中添加即可，而页面不会出现很大的混乱，对以后接管你代码的人都很好。三、设计点击事件1、这里我们在最外层的divwrapper上放了一个ref，然后通过vue的ref获取里面的titlediv。2、接下来就是整篇文章的重点了：注意听！！看到这堆代码不要惊慌，下面我们一步一步来分析。3.首先是函数名，handelClickItem，用户点击元素。这个函数的参数是用户点击了哪个标题。我们之前设计的itme.action就是这里需要用到的。（当然这里也可以使用索引，但不推荐）。4.这里处理的原因是querySelectorAll方法返回的是类数组，我们没办法直接使用array方法，所以使用Array.from强制转换。5、我们得到的数组其实包含了最后一个sliderdiv，但是那个slider是不需要的，所以对其进行优化，裁剪，将slider从数组中移除。tabs是我们两个标题div的数组。为了清楚起见，让我们打印标签。6、下面的代码使用了我们传递的参数，currentItem的用途，你可以简单的理解为当前div的索引。（其实这里用到了enum，这个场景的作用和index差不多）7.ok，现在我们只需要知道slider应该滑动的距离就可以了。这里我们用到offsetLeft和clientWidth，先解释一下这两个是什么。1.补充附加技巧----offsetLeft先来看看MDN是怎么介绍的。这里提到它返回的是当前元素的左上角相对于offsetParent左边界的偏移值。让我们先打印userClickItem以查看其上的此属性。是不是很熟悉，没错，这个offsetParent就是它的父元素包装器，但是这个属性不一定是指父元素。你怎么理解的？我们把wrapper的position:relative删掉后，再打印一遍。你觉得清楚吗？MDN的解释，更笼统地说，应该是相对于最近的具有相对定位属性的父元素。在这里，为了直观说明，我们在包装器中添加了一个20px的内边距。这个时候打印userClickItem是什么意思呢？其实这里指的是距离。为什么我们需要知道offsetLeft？这里就是给我们以后调整风格的时候埋下伏笔。万一我们以后需要调整wrapper的margin和padding，我们的slider不会受到影响，因为我们是根据这个值计算的。2.补充附加技巧----clientWidht假设我们不给我们的标题div添加padding属性，那么此时它的值就是我们的内容，也就是内容区域的宽度。当我们给title加上width时，是指content加上padding的宽度。1.我们来验证一下，先打印没有padding的情况。结果如下：2、我们加padding再试。4.滑块初始位置点击移动就ok了！这里我们知道clietnWidth和offsetLeft是什么意思。这两个值有什么用呢？我们的滑块本身相对于包装器滑动。它的起点实际上是包装器的最左侧。如果它的初始位置是上面的calcOffset，那它不就在第一个标题的正下方吗？ok，定义一个变量接收就行了。说明一下，这个7.5是我微调的，没有什么实质性的原因。然后我们设置一个：style是计算出来的属性滑块样式，可以绑定滑块的div。刚装好元件时，让滑块移动到正确的位置。5.字体大小切换比较简单。大致说一下原理吧，因为我们可以得到用户点击的div和所有的div数组。我们增加了用户每次点击时获得的div的字体大小。并过滤掉剩下的div，让他们的fontSzie恢复正常。至于剩下的小样式等，这里不再赘述，核心就是上面的思路。至此我们基本实现了github主页的效果。请注意，我们的滑块是滑过的，而不是直接在标题下方。（不会记录gif的痛苦....）
