Vue3实现一个标题点击变粗且底部有提示的效果(二)

简介: Vue3实现一个标题点击变粗且底部有提示的效果

image.png

image.png

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

image.png

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

image.png

6.下面的代码就用到了我们传递的参数,currentItem的目的,你可以简单理解为当前div的index。(其实这里用的是enum,这个场景和index的作用相差无几)

image.png

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

image.png

这里我们用到了offsetLeftclientWidth,我们先讲解这两个究竟是个什么东西。

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


我们先看MDN是如何介绍的

image.png

这里提到了,返回当前元素左上角相对于offsetParent左边界偏移的值。我们先打印一下userClickItem来看看它身上的这个属性。是不是很熟悉,对没错,这个offsetParent就是它父元素wrapper,但是这个属性并不一定就是指的父元素。怎么理解呢?

image.png

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

image.png

是不是感觉有清楚了呢?

MDN的解释,更加通俗的来说应该是相对于最近的具有相对定位属性的父元素的.....

image.png

ok,现在我们offsetParent搞明白是什么东西了

image.png

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

image.png

我们这时候再打印一下userClickItem

image.png

什么意思呢?

image.png

其实指的就是这里的距离。

我们为什么要知道offsetLeft呢?这里我们是为了给以后调整样式的时候留下伏笔,万一以后我们需要调整一下wrappermarginpadding我们的滑块是不会受到影响的,因为我们就是基于这个值来计算的。

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


image.png

假设我们不给我们的标题divpadding属性,那么这时候它的值就是我们content也就是内容区的宽度。让我们给标题加上宽度的时候,它指的就是content宽度加padding的宽度。

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

image.png

结果如下:

image.png

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

image.png

image.png

三.滑块的初始位置与点击移动


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

image.png

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

image.png

ok,定义一个变量接收一下即可。

image.png

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

image.png

然后我们设置一个:style是一个计算属性滑块style

image.png

与滑块的div绑定即可。

image.png

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

image.png

四.字体大小的切换


image.png

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

至于剩下一些小的样式和其他,这里不过多赘述,核心就是上面的思路。af90e39591c74ec8865854cc9d4bf448_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg




相关文章
|
10天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
96 59
|
10天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
98 59
|
9天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
10天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
101 57
|
11天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
1天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
9 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
11天前
|
JavaScript API
再不学vue3就没有人要你了!速来围观vue3
这篇技术文章介绍了作者从最初对学习 Vue3 抵触到最终决定投入学习的心路历程,展示了 Vue3 相较于 Vue2 的诸多改进和新特性,如更优的性能、更小的代码体积及更佳的 TypeScript 支持。文章重点阐述了 Vue3 中 createApp 的使用变化、emits 机制、多事件处理、Fragment 的引入等重要功能升级。此外,还深入探讨了 Composition API 和 Options API 的区别,强调 Composition API 在代码组织和逻辑复用方面的优势,并给出了在不同项目规模中选择合适 API 的建议。
23 0
|
1天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
8 2
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
8 1