Vue项目中常见问题

目录

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

方法一:采用样式完成

1.首先找到一级分类的位置

 2.找到一级分类的样式

方法二:通过JS完成

1.绑定鼠标进入的事件@mouseenter

 2.事件函数

 3.把index的下标赋值给我们自定义的currentIndex 

 4.给一级分类添加类名

5.绑定鼠标移除事件@mouseleave

6.另外的要求,利用事件委派完成

---

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

方法一:采用样式完成 1.首先找到一级分类的位置

 2.找到一级分类的样式

 效果完成:

方法二:通过JS完成

鼠标移动到谁的时候,可以把相应的索引值存一下

在TypeNav/index.vue中

1.绑定鼠标进入的事件@mouseenter

 2.事件函数

 效果:

data数据存储成功

鼠标一进入控制台就会打印对应的下标

 3.把index的下标赋值给我们自定义的currentIndex 

 效果:

随着我鼠标移动到对应的一级分类,我们控制台中的data中存储的currentIndex的值也随着下标index的改变而改变

 4.给一级分类添加类名

鼠标移上谁,谁就有类名叫cur,从而背景颜色就在谁身上生效

 在css中添加一个.cur的背景颜色的样式

 效果完成

5.绑定鼠标移除事件@mouseleave

 

底下方法中这样写:

 效果完成:进入变蓝,移除背景色移除

6.另外的要求,利用事件委派完成

如何做到鼠标放到全部商品分类也会触发底下图书、音响的背景颜色 

改变一下结构

在全部商品分类和三级联动的外面加一个div父亲

 然后我们把刚刚加到一级分类里面的鼠标移除事件添加到全部商品分类和三级联动的父div上

这样就实现了我们要的效果,利用到的知识是:事件的委派,把子元素的事件委派给了父亲,离开了父亲的时候,才会触发鼠标移除事件

效果完成: