这周在项目中需求完成一个类似于github顶部标题的作用,如下图

Vue3完成一个标题点击变粗且底部有提示的作用


Vue3完成一个标题点击变粗且底部有提示的作用

主要作用为:当用户点击的时分,底部呈现黑色的细线,而且当时项意图字体变粗。感觉这种场景很多,特来记录一下完成进程。

接下来我会一步步解说去完成它。

一.根底款式和规划思路

Vue3完成一个标题点击变粗且底部有提示的作用

Vue3完成一个标题点击变粗且底部有提示的作用

咱们稍微调整一下布局(这儿我运用的是tailwind.css),本篇主要内容不是介绍css的,所以一些款式的知识点需求读者自己去查阅。

Vue3完成一个标题点击变粗且底部有提示的作用

Vue3完成一个标题点击变粗且底部有提示的作用

这儿我的规划思路是这样的,假定当时我的页面有两个选项卡,当用户点击某一选项卡的时分,下面的字会移动到相应的方位,且当时元素的字领会变大。

二.优化一下代码

为了更接近真实项意图数据,咱们把上面的数据再包装一下。

Vue3完成一个标题点击变粗且底部有提示的作用

1.enum最常见的运用场景便是,在某个列表具有某些固定值。再举个更简略的比如,参加你在做一款游戏,游戏的方向只要上下左右四个方向。那么我就可以定一个enum。如下

Vue3完成一个标题点击变粗且底部有提示的作用

在进行一些判别的时分,就可以用这样的形式来if(currentDirection!==direction[0]),代表着假如当时方向不为TOP时,履行哪些函数。 而且代码具有相对的提示。具体的原理可以去看TS官网哦。这儿不过多赘述。

2.这儿的data一会要用来v-for,动态打印出咱们列表,action一会要用来传递点击事件的参数,它并不是咱们要用来在视图上展现的。

Vue3完成一个标题点击变粗且底部有提示的作用

3.终究改造的数据也很简略,便是很简略的v-for

Vue3完成一个标题点击变粗且底部有提示的作用

这样做的优点在于,即使后期咱们需求添加一个额定的标题,咱们只需求在数组data里添加即可,而且页面也不会呈现很大的紊乱,对后来接手你代码的人也很友好。

三.规划点击事件

1.在这儿咱们给最外层的divwrapper打上ref,然通过vueref拿到它里边的标题div。

2.接下来,是全篇要点:留意听讲!!

Vue3完成一个标题点击变粗且底部有提示的作用

看到这一堆代码,不要慌,咱们一步一步分析。

3.首要函数名,handelClickItem用户点击元素,这个函数的参数便是用户究竟点击的是哪一个标题

Vue3完成一个标题点击变粗且底部有提示的作用

Vue3完成一个标题点击变粗且底部有提示的作用

咱们之前规划的itme.action便是这儿需求用到的。(当然这儿运用index也行,可是不推荐)。

4.这儿的处理的原因是,querySelectorAll这个方法回来的是一个类数组,咱们并没有办法直接运用数组的方法,所以用到的了Array.from来强制转换一下。

Vue3完成一个标题点击变粗且底部有提示的作用

Vue3完成一个标题点击变粗且底部有提示的作用

5.咱们拿到的数组里边其实是包含最后的滑块div的,可是那个滑块并不需求,所以再优化,剪切一下,把滑块从数组中去掉。tabs即为咱们两个标题div组成的数组。

Vue3完成一个标题点击变粗且底部有提示的作用

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

Vue3完成一个标题点击变粗且底部有提示的作用

6.下面的代码就用到了咱们传递的参数,currentItem的意图,你可以简略了解为当时div的index。(其实这儿用的是enum,这个场景和index的作用相差无几)

Vue3完成一个标题点击变粗且底部有提示的作用

7.ok,咱们现在只需求知道滑块应该滑动的距离就行了。

Vue3完成一个标题点击变粗且底部有提示的作用

这儿咱们用到了offsetLeftclientWidth,咱们先解说这两个究竟是个什么东西。

一.额定技术弥补—-offsetLeft

咱们先看MDN是如何介绍的

Vue3完成一个标题点击变粗且底部有提示的作用

这儿提到了,回来当时元素左上角相对于offsetParent左鸿沟偏移的值。咱们先打印一下userClickItem来看看它身上的这个特点。是不是很熟悉,对没错,这个offsetParent便是它父元素wrapper,可是这个特点并不一定便是指的父元素。怎样了解呢?

Vue3完成一个标题点击变粗且底部有提示的作用

当咱们把wrapperposition:relative删除后,再打印看一下。

Vue3完成一个标题点击变粗且底部有提示的作用

是不是感觉有清楚了呢?


MDN的解说,愈加通俗的来说应该是相对于最近的具有相对定位特点的父元素的…..

Vue3完成一个标题点击变粗且底部有提示的作用

ok,现在咱们offsetParent搞了解是什么东西了

Vue3完成一个标题点击变粗且底部有提示的作用

咱们继续了解这个画线的句子,这儿用图形解说比较好。这儿为了直观的解说,咱们给wrapper加上一个padding20px

Vue3完成一个标题点击变粗且底部有提示的作用

咱们这时分再打印一下userClickItem

Vue3完成一个标题点击变粗且底部有提示的作用

什么意思呢?

Vue3完成一个标题点击变粗且底部有提示的作用

其实指的便是这儿的距离。

咱们为什么要知道offsetLeft呢?这儿咱们是为了给以后调整款式的时分留下伏笔,如果以后咱们需求调整一下wrappermarginpadding咱们的滑块是不会受到影响的,由于咱们便是基于这个值来核算的。

二.额定技术弥补—-clientWidht

Vue3完成一个标题点击变粗且底部有提示的作用

假定咱们不给咱们的标题divpadding特点,那么这时分它的值便是咱们content也便是内容区的宽度。让咱们给标题加上宽度的时分,它指的便是content宽度加padding的宽度。

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

Vue3完成一个标题点击变粗且底部有提示的作用

结果如下:

Vue3完成一个标题点击变粗且底部有提示的作用

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

Vue3完成一个标题点击变粗且底部有提示的作用

Vue3完成一个标题点击变粗且底部有提示的作用

四.滑块的初始方位与点击移动

ok!这儿咱们知道了clietnWidthoffsetLeft什么意思了,咱们拿到这两个值有什么用呢?

Vue3完成一个标题点击变粗且底部有提示的作用

咱们的滑块本身便是相对于wrapper来滑动的,它的起点其实是wrapper的最左边,它的初始方位假如是上面的的calcOffset的话,那不就正好在第一个标题的正下方了吗?

Vue3完成一个标题点击变粗且底部有提示的作用

ok,界说一个变量接纳一下即可。

解说一下,这个7.5是我微调的一下,并没有什么实质性的原因。

然后咱们设置一个:style是一个核算特点滑块style

Vue3完成一个标题点击变粗且底部有提示的作用

与滑块的div绑定即可。

Vue3完成一个标题点击变粗且底部有提示的作用

组件刚挂载的时分就让滑块移动到正确的方位。

Vue3完成一个标题点击变粗且底部有提示的作用

五.字体大小的切换

Vue3完成一个标题点击变粗且底部有提示的作用

这个比较简略,大致说一下原理,由于咱们能拿到用户点击的那个div和悉数的div数组,咱们在每次点击的时分,将用户拿到的divfontSize变大,而且筛选出剩余的div,使其fontSzie恢复正常即可。

至于剩余一些小的款式和其他,这儿不过多赘述,核心便是上面的思路。


至此咱们基本完成了github主页的那个作用。

留意,咱们的滑块可是滑过去的哦,并不是直接呈现在标题下方的。(不会录制gif的痛….)

Vue3完成一个标题点击变粗且底部有提示的作用

Vue3完成一个标题点击变粗且底部有提示的作用