-
整体引入 lodash:
import _ from 'lodash'
按需引入 lodash 中的 throttle:
import throttle from 'lodash/throttle'
-
事件控制 2、3 级分类的显示和隐藏:
原来的是使用 css 去做的,改为一个类:
- 首先把原来的 hover 去掉,改为一个类。
- 在 item 身上动态的强制绑定 class,[item_on: 布尔值],布尔值为 true,那么当前的这个 item 的类就生效。
- 移入哪一个 item,就让当前这个 item 的类为 true。
- 设计一个数据,
currentIndex = -1
。 - 移入 item 的时候,让
currentIndex = index
。 - 移出不能再 item 身上去加,因为最后 item 和 h2 移出他们整体会把 2 级分类隐藏,所以需要用 div 把 item 和 h2 包裹,给 div 添加。
-
把所有的 a 标签换成 router-link 会卡,因为组件标签太多了,导致内存当中组件对象太多,容易造成鼠标移动到列表中的时候,一卡一卡的。(来自于111集 - 20: 00 - 点击分裂跳转到搜索页面,携带 query 参数 )
解决办法:
- 把 **声明式导航 router-link **改为 编程式导航
$router.push({})
。 - 把声明式导航改为编程式导航,click 事件在点击之后,是需要调用函数的,同样每个 a 标签都添加了点击事件,那么内容中就会定义很多个函数,内存占用也是比较大的,效率虽然比声明式导航强,但是还是不够好。再用事件委托来把函数定义在父元素上来解决。
- 把 **声明式导航 router-link **改为 编程式导航
-
事件委派(事件委托):在共同的父级/祖辈元素身上添加事件监听。
问题:怎么知道点击的是不是 a 标签?
问题:假如你知道你点击的是 a 标签,怎么知道点击的是一级还是二级还是三级?
问题:参数怎么携带,要携带哪些个的参数?
这三个问题可以使用自定义属性
data-
来解决。如:<a href="javascript:;" :data-category1Id="c1.categoryId" :data-categoryName="c1.categoryName"> { { c1.categoryName}} </a> <a href="javascript:;" :data-category2Id="c2.categoryId" :data-categoryName="c2.categoryName"> { { c2.categoryName}} </a> <a href="javascript:;" :data-category3Id="c3.categ
PC项目笔记
最新推荐文章于 2022-10-08 23:31:50 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)