00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们去完成一级分类动态添加背景颜色的业务。那咱们呢,先看一下呢,咱们正在开发的这个项目,那咱们即将要完成的是什么呢。就是鼠标移上某一个一级分类啊,给它添加一个背景颜色,比如说天蓝色。对吧,那咱们呢,也可以看一下呢,已经上线的这个项目,咱们可以看一下。那比如说啊老师呢,把鼠标移到手机上。那么手机的这个一级分类啊,是有相应的背景颜色的。那假如说我鼠标一上这个钟表,那么钟表这个一级分类是有背景颜色的。但是其余的兄弟们啊,是没有背景颜色的。那所以说接下来呢,咱们是要完成这样的一个业务逻辑。那有的小伙伴可能会已经猜到了,说老师那这个很简单啊,比如说这种问题呢,第一种解决方案。
01:07
咱们看一下子就是第一种解决方案。可以采用什么呢?哎,采用这个样式完成。就是鼠标以上谁,那我给他加一个号呗。那么背景颜色为天蓝色不就可以了吗?哎,当然,这种方案可不可以是可以的啊。咱们呢,可以看一下子。那咱们呢,去找到咱们相应的三级联动这个组件。那应该啊,是咱们的这个全局组件typev。那咱们呢,可以看一下的,那首先说你鼠标一上去,那一道是谁上呢,是一级分类上。那也就是哪里呢,这里C。那也就是说啊,当你鼠标移到这个带有类名的这个item上,那它不就是一级分类吗?那给它加一个背景颜色不就行了吗?
02:04
那咱们呢,先看一下子,那看一下相应的一个样式啊,咱们瞄一眼找一下。你看这是container,这是all啊,也就是外部的这个类名啊,Container。以及呢,咱们找一下子有没有叫item的,那咱们看一下,哎,在这。在这个什么salt list2下不有一个item,那item不就是咱们的一级分类吗?那有的同学可能会说,老师这个很简单对吧,那你给item加一个什么呀,比如说咱来一个叫做item对吧,给他来一个ho,鼠标一上去背景颜色啊,咱给它比如说来一个天蓝色sky blue,那不就完事了吗。那咱们呢,可以刷新看一下的,OK是没问题的。对吧,那当然咱们的不采用第一种解决方案,就是什么呢?哎,用样式去解决,咱们不采用这种方式。
03:05
咱们呢,要用第二种解决方案。哎,第二种解决方案。就是通过什么呢?哎,通过GS去完成。当然,有的小伙伴可能会说,老师,那我就采用第一种解决方案行不行可以啊。对吧,但是呢,咱们呢,还是要稍微练习一下子GS的业务逻辑。那咱们呢,在这里呢,得琢磨琢磨。那首先说啊,一级分类一共有多少个呢?咱们数数,所以你知道零一二三四五六七八九十,11 12 13 14 15啊零到15索引值,也就是说16个一级分类。那么咱们得琢磨琢磨,比如说我鼠标一上手机,OK,手机咱到时候给他添加一个动态的类名,比如说这个类名呢,叫做坑背景颜色呢,咱给他来个天眼天蓝色。
04:06
那比如说啊,你鼠标一道汽车用品,那也就是索引值为15的这个元素,咱呢给它加一个类名叫做壳,背景颜色为天蓝色。但是你要注意是你鼠标以上谁谁才有这个类名。对吧,那这个怎么完成呢?那咱们呢,可以看一下的咱们的这个组件啊,老师呢,把这块的样式啊,我先给你注释上你看啊。那以及GS这一部分老师呢,也给你注释上,你看老师做一件事。你看咱们的一级分类,比如说你是变了一个数组,数组里面呢有16个元素。对吧,那你要for是不是执行16次。那么每一次呢,都有相应的一个索引值,那这个索引值呢,在每一次循环的时候,应该是零到15。对吧,你看老师呢,先给他展示出来,这不是咱的一级分类对吧,你看老师呢,先给他展示出咱们的这个索引值啊,这个老师呢,在每个后面我给你打印一个index,你看。
05:13
这不就是零到15吗?对吧,那咱们琢磨琢磨,那比如说我鼠标移上数码,那数码的索引值是三。对吧,那我鼠标以上钟表,钟表的索引值为九。那咱们是不是可以当用户鼠标移上谁的时候,是不是把相应的索引值是不是可以存一下。那这样就可以找到,找到你鼠标到底移到谁的上去了,对吧,你是移上了数码上还是这个钟表上,那我就可以咋是不知道。所以说你看怎么办呢,咱们可以这么办。你看啊。老师呢,在想的是数据这哎在date这里,老师来一个date。走,你。
06:00
那当然啊,这里面呢,咱们需要返回一个对象。老师呢,在这里呢,添加一个想是属性,那这个属性用来干什么呢?就是存储。哎,存储用户鼠标啊,这个移动啊,或者一上去啊,一上哪一个这个一级分类。比如说咱给它起个名字叫做cur current index。那起始值为几呢?咱们可以看一下已经上线的这个啊。首先说。老师呢,现在鼠标啊,谁都没有移上,那也就是说谁都没有背景颜色。对吧,那你一上手机,手机是不是才有。对吧,那所以说咱们的这个初始值啊,你最好别为零,因为如果为零代表啥,代表的是图书音像和电子书看是为零。对吧,所以说默认值呢,咱可以来一个数字。
07:02
这个数字呢,它不是零到15之间的,咱可以随便来一个,比如说你看老师来一个负一。那负一代表什么呢?代表就是你鼠标谁都没有移上。对吧,你要支持零到15,那我初始值是负一,代表是不是谁都没有移上。对吧,那假如说我鼠标一上数码。OK,那你就把咱想示的数据,哎,由负一变成几变成三。那假如说我鼠标一上这个,呃,母婴,那你就把索引值啊,赋值为多少11不就可以了。对吧,那咱们可以看一下怎么完成。那比如说啊,鼠标以上谁。那咱们呢,可以呢,去给咱们的这个H3,或者给咱们的这个div啊,都可以给他来一个事件。比如说咱们就给这个H3吧,咱给他来个什么叫做鼠标进入,那就是mouse enter。那这个呢,咱们呢,给它来一个回调,比如说叫做change in啊in that。
08:07
当然啊,你这个回调需不需要纯参,咱们一会儿再去研究,那当然咱们目前是没有这个回调的。那所以说在咱们的method当中,那去搞一个叫做methods。那当然这个呢,咱们也写一下子,这个是什么,是鼠标。进入。对吧,干什么呢?是不是要修改咱们的响应式数据cur in t current index的属性。对吧,那咱给他拿过来。老师呢,先给他弹一个123,比如说你鼠标以上谁,诶你会弹一个啥,弹个123,你看啊,鼠标以上谁是不是就弹个123。对吧,但是你得想明白呀。你这个回调需不需要传一些参数?啊,当然得需要,为什么呢?你琢磨琢磨,你看咱们打开咱们的开发者工具。
09:07
看一下咱们的数据。啊,找到咱们的type nv。对吧,在这你看它现在起始的这个current index是几十负一,那我鼠标移上数码,那你这个值是不是应该是三。对吧,那假如说你鼠标一上的是母婴,你是不是应该11,那也就是说你鼠标一上的时候,你得传值啊。那你传的是什么呢?是不是你得传你鼠标移上的某一个元素的那个索引值。而这个索引值咱们有没有呢?有这不index的吗?总共执行了16次,分值分别是零到多少?零到15。那所以说鼠标移上谁,你就把它的索引值给它传进来。那咱们呢,可以打印一下,当然这里咱们要接收一下index。打印一下,哎,打印一下index,眼睛见到的才是真的。
10:01
那咱们呢,可以看一下,你看,比如说现在老师呢,鼠标移到钟表上,你看是不是九。对吧,我鼠标移到珠宝上是不是14,汽车是不是15,那你说鼠标移上谁能拿到那个元素的相应的索引值,那咱们做一下笔记,Index是什么?对吧,就是鼠标。一上,哎,某。一个一级分类的元素的索引值。对吧,那咱们呢,就可以用响应式数据是不是进行存储。对吧,那这里咱就可以来上一行代码,这点current index等于index。那这样做的一个好处是什么呢?咱们呢,还是看咱们的开发者工具你看啊。就这样的一个操作呢,它可以确定你鼠标到底以上的是某哪一个元素,当然你看这玩意会有卡顿现象,老师给他切换一下,你看是不是是不是九对吧,比如说我鼠标移到电脑办公,它应该是五,当然它有卡顿啊,你切换一下就行了。
11:06
对吧,所以这样的一个好处是什么呢?就是你可以知道你鼠标移上去的是哪一个元素。那当然咱们呢,想给他添加类名。啊,也就是说咱们通过类名去控制谁有颜色谁没有颜色。对吧,那咱们呢,可以给咱们的这个item,这不就是一级分类吗?那咱们呢,就给它添加一个动态的类名class。对吧,比如说这个类名叫什么叫做坑。那么什么时候才会有这个类名,那这块你得琢磨,就是当咱们的详是属性的值和你这个index的值,因为index这个值它不是一个固定的值,它是零到多少,零到15,而这个值存储的啥是你鼠标移上去那个元素的索引值。对吧,那就是什么时候让他有这个类名叫做K呢?也就是说当current in d这个值等等于某一个索引值的时候。
12:05
那就给它加上一个类名,叫做科。那这行代码所代表的含义是什么?就是鼠标以上谁谁才会有相应的类名叫坑。咱们呢,可以看一下子。你看比如说一让他,那这个不就有类名叫K嘛,对吧,当然咱们看一下底下这里是不是报错了,那应该是单词写错了,叫做CT少了个T。对不,那所以说这样可以完成一件事,什么事呢?就是鼠标移上谁,谁有name就坑。那这个类名是给谁加的呢?是给这个叫做艾特,又加了一个类名叫做科。对吧,那所以说咱们可以在底下的这个样式当中,咱们找一下子找一下子。对吧,也就是说如果你叫做it。对吧,哎,点item且带有什么呢?且带有这个类名叫做什么呢?啊,其实咱们在这直接加一个叫做点坑就行了,对吧,你叫做item或者叫点坑都可以对吧,如果你有类名叫点坑的,那咱们呢,给它加一个背景颜色叫做sky blue。
13:15
对吧,那所以说咱们可以看一下子,你看鼠标以上谁谁是不是有类名叫做坑,是不是有背景颜色。对吧,那所以说咱们最终的解决方案是什么呢?咱们呢,可以看一下来老师给你刷新看一下。那也就是说让咱们的组建的身上。咱们还是看一下咱们开发者工具来搁这儿给你打开。也就是说让咱们的组件身上给它初始化一个叫做current in death这样的一个想是数据。初始值为几呢?是负一这块呢,你千万别给我来一个零那样啊,你看啊,因为有很多同学他习惯初始值为零,如果你要这么搞,那就坏了,那就是说你鼠标还没移上呢,第一个图书音像电子书刊,它就有背景颜色了。
14:04
对吧,那负一代表什么?代表是哎,谁都不是,你鼠标还没移上去呢,谁都不是,那接下来当你鼠标移上谁OK,我用咱们的想是数据呢,去存储一下它的索引值。对吧,比如说八,那总共负循环执行了多少次呢?执行了16次,零到15嘛,那就是说某一次循环它的索引值是八,如果相等,那就有类名。对吧,那所以说这样不就完成了吗?对吧,但是这里要注意一件事,你看啊。咱们现在呢,是完成了,鼠标一上谁谁就有类名,这没问题,那鼠标移除呢。你看鼠标移除呢,鼠标移除呢。对吧,你看人家的这个上线的这个鼠标进入OK,有类名鼠标移除,你看是不是所有的类名是不是全没了。对吧,所以你看嘛,鼠标移除,鼠标移除是不是类名就没了。
15:01
对吧,那所以说怎么办呢,咱们可以给他再来一个事件。对吧,就比如说给咱们的H3再来一个事件。对吧,比如说鼠标一出,那就是at Mo,谁呀Mo live。那这块呢,咱假如说给他来一个这个叫什么,比如说叫做live啊index。对不当你鼠标移除的时候会触发这个毁掉,那咱们呢,去写一下子看一下这里。来看这儿。这个是什么呢?是一级分类鼠标移除去啊移除啊除对吧的事件的毁掉。那咱们看一下,那当你鼠标移除的时候,这个回调会执行。咱们可以打印一下,比如说666。对吧,那咱们可以运行一下去瞄眼啊,你看鼠标一出是不是会执行。那有的同学可能会想,那老师这不就简单了吗?当你鼠标移除对吧,你让咱们的curt current index对吧,In DS对吧?这让他变为什么呢?变为负一,就是谁都不是对吧?或者你来个负二负三都可以,只要不是零到15之间。
16:15
对吧,那就是这点。Index等于多少?等于负一,那你看这样可不可以可以。对吧,那你看咱们瞄一眼啊,瞄一眼。你看鼠标进入。没问题。鼠标移除也没问题。对,不但是你要注意一件事,就盯住哪儿,盯住这儿鼠标进入,我放在第零个,这鼠标一除。你看我只要鼠标放到全部商品分类这里,诶它就没了,你看吧。对吧,但是你看已经上线的这个项目,你要注意鼠标接入。没问题,鼠标移除也没问题。对吧,鼠标进入没问题,鼠标移除,你看老师把鼠标放到了全部商品分类这里。
17:02
它这个索引值为零的,这个背景颜色还是有的。对不,你看嘛,我放在这,这也是有的,对吧,当鼠标移除到这个红色的盒子以外,它才消失。对不而咱们这个可以吗?这个是不可以,你看嘛,鼠标进入鼠标移出。对吧?这是为什么?你琢磨琢磨,咱们的鼠标移除它是给谁加,是给H3加的,你只要离开H3才会触发,而你的全部商品分类在哪,在这呢?对不,你看吧,他俩是独立的,因为咱们把事件给的是H3鼠标移除它就会触发。对不鼠标移除就会触发,但是你的全部商品分类,你看这儿啊,它是一个什么呢?它呢是一个呃,HR。对吧,而且你要注意这两部分的结构啊,它俩是兄弟关系。对不,你鼠标移除了是在这儿写的。那么我怎么才能完成什么呢?就是我鼠标看这,我鼠标移除,我放到这儿,我放到这儿。
18:07
哎,他怎么他也有,那你这块得琢磨琢磨。其实这里咱们可以用到什么,用到事件的委派,你看啊,首先说这是商品分类的地方,这个是全部商品分类,其实他俩现在的这个关系啊,是兄弟关系,你看老师可以怎么办呢?可以这么办,我给他的结构带走。我把他两者呀,我把他们两者,你看老师给他拿过来,我把他们两者外面我给他套一个父亲。你看我放了一个div。对不?你看咱们呢,稍微给他改变一下结构,也就是说三级分类和全部商品分类,他俩的外面我放了一个父亲。对,不,但是样式咱们已经写好了,结构没有任何变化。你看老师这回是怎么办的呢?你看首先说鼠标移除。
19:00
你鼠标就算从这到这儿的时候,它应该也有类名,也有类名,啥叫做那个呃,叫做那个坑对吧,但是咱们现在没有,这是为什么呢?你要注意为什么,因为现在你鼠标只要离开H3,它就是缩引值为负一,就是没了。对不?这块你要想明白,咱们现在鼠标移除时间是给谁加的,是给咱们的这个这个这个这个H3,你只要离开H3索引值就为负一,那就是没了。所以说鼠标移除你不应该给H3。对不,那你给谁呢?你琢磨琢磨,你鼠标不仅仅说离开H3的时候,它还有类。你鼠标就算离开了这个这个H2。你看,就算离开H2。他才没的。你看嘛,我鼠标进入,鼠标离开H3,我进入到HR,是不是还有类名,但是你离开了这个HR全部商品分类,它才消失。
20:01
所以说怎么办呢?你可以这么办,把它两者外面给他加一个复合子六事件的委派。对不,那这样鼠标移除对吧,你不管是三级联动的还是HR,你鼠标移除才会触发,才会消失,所以这样玩是可以的,所以你看这回咱们再看看咱们这个你看啊鼠标进入。对吧,你鼠标离开了他俩的最外的复合子,呃,出去之后才会消失。所以说这里面咱们用到了谁,用到了事件委派,也就是说把这些子元素的事件委派给了父亲。对不?你离开了这个父亲的时候,才会触发鼠标移除事件。对不,你看嘛,鼠标击弱。对不对,鼠标移除。现在触发了吗?没有,当你离开了全部商品分类这个红色的盒子和底下三级联动的时候,离开的时候他才会触发。对吧,那所以说咱们完成了一级分类的动态展示类名的业务,所以说这个套路你要学会通过详细数据去控制着到底谁该显示,谁不该显示。
21:14
对不,以及这里面呢,咱们也用到了谁事件的委派。哎,事件的委派,或者有的人管管它叫做事件的委托,对吧,委托给他们的啥,委托给他们的副元素,这样鼠标移除它才会消失。对吧,所以说这是咱们讲了一下的一级分类动态添加类名的业务。
我来说两句