00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,要实现表单元素的自动聚焦的实现。那咱们呢,去看一下的已经写好的这个项目。那比如说啊,老师选择图书。电子书刊以及电子书对吧,那比如说啊,我现在想修改内存这个属性,点击进来。那比如说我现在想修改呢,256G这个属性值。那么当我点击span的时候,那会有查看模式是不是切换为编辑模式?但是你会发现啊,人家已经写好了这个呀,表单元素人家是怎么的,是自动聚焦的。对吧,你会发现这个光标一闪一闪亮晶晶。对吧,那你再回首呢,看一下咱们的这个项目。比如说啊图书。电子书刊以及电子书,咱们呢也是修改内存。
01:00
那以及啊,你看当老师点击SPA的时候,切换为。编辑模式的时候,那咱们的表单元素啊,并没有什么是并没有进行聚焦。对吧,那这个呢,该怎么实现。对吧,那咱们呢,得研究研究。那首先说啊,比如说咱一点点来你看啊,老师选择的是内存你看啊。那也就是说,当老师点击SPA的时候,我要获取相应的input,是不是得让他聚焦?对不对,对不,也就是说我点击了某一个SPA,那我得获取到相应的input这个节点,让它聚焦。那咱们回到咱们的组件当中。先看一下咱们的结构。那它无非是哪部分,是不是底下这个cut当中的,咱们看一下结构,应该是底下这个,呃,Div里面的。
02:01
对吧,那咱们呢,看一下它应该是哪啊,应该是这个input,咱们找一下子。那应该啊,是这个input和这个死绊这这块。对不,那也就是说当我点击这块得琢磨了,你看啊。就是当我点击SPA的时候,也就是我点击它的时候。那么我得获取到相应的音谱的这个节点,让它聚焦。对不对。对吧,那所以说啊,那咱们呢,先给他写一个点击事件对吧,给他写个回调,那记住啊,这里面有一个代码叫肉点flag等处啊,那这块呢,咱起个名字吧,叫to,变成什么呢?编辑模式E。对吧,那咱们呢,把相应的肉啊给人家传进来。对吧,那当然咱们目前是没有这个方法的,那咱们呢,回到咱们的method当中去写一个。
03:01
对吧,那这块呢,咱们也做一下笔记,这个呢是点击SPA的回调变为什么,是不是变为咱们的编辑模式。对吧,啊,那这里面呢,咱们需要有一行代码,就是肉点flag应该是为啥呀,为true。那就相当于老师啊,什么都没做,就是把刚刚的代码换了一个位置。因为咱们刚刚也感觉到了,就是当你一点击SPA的时候,你还有别的事要做。对不对,就当你一点击SPA的时候,你得获取相应的input让他聚焦。对不对。那也就是说咱们呢,是需要获取相应的这个EL input这个组件,对吧,说白了就是这个input标签。对不对,因为你要获取到了这个音谱的节点,你才能让它咋的,是不是才能让它聚焦。对吧,那这块怎么整呢。
04:02
那首先说啊,咱的就比如说内存这个属性,它的属性值啊有几个,是不是有三个。对不对,属性值是有三个64g 256g和128G,那对于现在这种情况下,那你要注意input是只有一个吗。这要注意,音input的只有一个吗?这可不是只有一个呀。这是多个呀。对不对,那所以说咱们可以怎么办呢?你可以这么办,给咱们的这个EL input呀,你给他打一个啥,打一个ref。但是你要注意一件事,什么事,咱们的这个input呀,可不止一个。对不,你看我点击来这块老师呢,先给它注释上,你看你这块要想明白一件事什么事,这块老师先给它去掉。那就是说,当我点击来。还是给他切换回来。咱们呢,还是看内存。那我点击第一个SPA,那我是不是要获取到第一个音谱的?那我点击第二个SPA,是不是要获取第二个音谱的?
05:06
那我点击第三个SPA,是不是获取第三个音谱的,让它聚焦。对不,那你想获取input的,那一定是啊,想获取那个音input的标签就是那个,呃,是来打is。但是你要注意烟MP的标签是只有一个,可不是是多个,那咱们怎么区分到底是第零个,第一个,第二个呢?很简单,你可以用它的啥,是不是用咱们这个索引值。对不,这个Dollar in death不就是012,那所以说这块呢,咱们就可以用谁用Dollar谁in death。那你要注意是在什么时候去获取相应的什么相应的input节点。对吧,就是获取那个input什么时候获取,是不是当你点击这个SPA的时候。对不对,你这块得想明白啊。来看这儿,这儿一定要想明白,那么老师呢,刚刚做了一件事,什么事儿,就是给咱死办,绑定了个单击事件,以及写了回调,把相应你点击的那个属性的那个flag变为处,以及啊,老师给每一个EL input打了一个啥,打了一个ref。
06:14
其属性值为Dollar index,为什么?就是为了区分开到底是第零个第一个还是第二个input?那么什么时候获取input呢?是不是应该当你点击SPA的时候获取input,让它聚焦?对不,那点击span应该是,是不是就是to edit是不是在这。那在这里咱们要干什么?是不是要获取咱们的这个音input的节点?对,不让它实现什么,是不是实现自动的聚焦。那咱们看一下能不能获取到啊,你看这点Dollar res,那当然咱们是不是得通过索引值012,是不是获取相应的input,那当然咱这块有索引值吗?没有没有怎么办,你可以点击的时候。
07:00
对不,你可以点击的时候,老师把这块给它挪上来吧。只能他看着怪怪的,就当你点击的时候,你可以把相应的索引值是不是给人传过来。对对吧,那这块谁Dollar in desk。那咱们看一下子,那这块呢,是不是就可以收到相应的index。那咱们想获取相应的input,那你是不是不能点这块,一定要注意不能点index,为什么?因为它是个变量。所以说咱们得用啥用这种中括号枚举的形式index。那咱们呢,看一下子能不能获取到相应的什么相应的input。对吧,那咱们呢,看一下。走,比如说老师点击第一个SPA,那你是不是要获取第一个音谱的,你看能获取到,获取不到。那这是为什么呢?那首先说啊,这块呢,你得知道一件事啊,你看你看。来看这儿。当老师点击死绊的时候。
08:00
我点击你想想我点击span的时候,那一瞬间才有input,那input才刚刚出现完,你直接获取到,能获取到获取不到。再从另一方面分析。对不,那比如说咱们这块是有SPA和input。啊,是不是进行切换的,是不是用V-if。对不对,看这是不是用的是不是,呃,咱们找一下用的是不是v if。也就是说会实现什么是不会实现元素的。上述跟下述。对不,什么叫上数加数,呃,说白了就是在呃倒节点数上有还是没有。对不,那对于你要去举个例子,就比如说你看这。就比如说现在老师点击此SPA,那你要注意一件事,那整个页面的结构有没有发生变化,有。有发生变化,因为你这块是不是渲染了一个啥是音铺的,那咱们应该知道重绘重排浏览器都是要重新渲染。
09:02
那渲染也是耗时间的,所以说你不可能一点击span立马获取到什么,获取到咱们的那个input。对不,所以这块呢,要注意一件事,哎,这块需要注意。需要注意就是点击此半的时候,那么切换为什么,是不是切换为input。对,不变,为什么变为编辑模式,但是需要注意。对于浏览器而言。对吧,比如说页面的重绘与重排,对吧,是耗什么呀,耗时间的。对不对,所以说当你点击啊span的时候。对不,那你就想想,就比如说我要重绘或者是重排,哎,重排。哎,一个input它是咋的,它是需要耗费时间的,就是因此我们不可能一点击span立马获取到什么,获取到input。
10:11
对吧,那你说怎么办?那所以说这里面呢,会用到咱们曾经的一个小知识点,叫做Dollar nice hi。这玩意是什么?是不是当节点?填一下就是当节点在,呃,当节点渲染完毕了,对吧,会执行一次。对不,那到了next t可以保证什么?保证你的input已经存在了。对吧,那所以这块可以怎么写,这么写这点Dollar next take。对吧,哎,Nice take有相应的回调。那这块呢,要注意他什么时候会执行一次呢,那一定是input有了它会执行一次。那咱们呢,可以看一下吧,你看他什么时候执行,你看啊。
11:00
走,老师点击它走,你看是不是执行了,所以它能确保什么,确保音谱的已经有了。那你就可以怎么办,是不是让相应的input是不是聚焦,那就是这点到了refs点啊,应该是中括号。Index点谁呀?Focus CU,那这块的老师写一下这块在干什么,是不是获取。相应的音谱的表单元素实现聚焦。那咱们呢,可以测试一下子,你看O不OK对吧,图书。电子书看电子书选择内存,比如说老师要修改128G没问题,是不是自动聚焦。对不?对不,哎,明显是不是自动聚焦,所以这块呢,一定一定要注意,那么老师呢,再说一下子这块一定要注意啊。就是当我点击SPA的时候。那你V-if v杠啊,V-if和V-else是不是来回切换,就是当你一点击SPA的时候,诶谁e input是不是要渲染出来。
12:08
对不对,比如说死SPA没了,而且音input的要出来了,但是你要注意渲染节点对不对,于浏览器重绘充台它是耗时间的,所以说不可能当你一点击的时候,咱刚刚也看见他也确实获取不到,当你一点击的时候是没办法获取相应的input的。所以咱们没办法,你只能遇到谁,遇到nice t,那么nice t在咱们前台项目的时候,老师也说过他干什么,是不是当渲染,当所有的节点渲染完毕的时候,是不是会执行一次。可以保证input是有的,那因此咱们是不是可以让它聚焦调focus方法就行了。对不,那除此之外还有一个。你看啊。就举个例子,比如说图书,电子书刊以及电子书,对不还是修改,当我点击添加属性的时候,其实它应该也自动聚焦,你看人家的这个啊,你看人家的这个。
13:04
走走走对吧,那已有的我要修改是不是自动聚焦,那我新增一个是不是也自动聚焦。对吧,那这个怎么搞,那这个呢,其实也是一样,就是当你点击添加属性的时候,你像咱们的at tr value list数组最后一项后面是不是又加一个元素。对不,那所以说这块呢,咱们找一下子看这看咱们的。就是咱们还要实现什么新增它也要自动取消。你看。再来比如说当我一点击添加属性的时候,你要注意你看这儿。咱们还是看数据,数据说明一切。看这啊,现在属性值是几,是三个,那么当我一点击添加属性值的时候,要注意是不是像这个数组里边又添加了一个元素。对不?那你说索引值分别是零,123,应该是索引值为三的这个音铺的是不是应该咋的,是不是应该是自动聚焦。
14:05
对不对,那什么时候中交是不是当你一点击添加属性值这个按钮的时候,是不是让你自动聚焦。对,不,而且新增的属性值一定是作为数组的最后一项,所以它的所以值能拿到,能数组的N减一吗?那所以说咱们找一下添加属性值这里看这。当你一点击添加属性值的时候,要注意啊,那么数组的末尾是不是又新增的元素,那应该也让它聚焦,那也是一样。对不,那也是this点儿,Dollar next take。对不,那以及还是谁这点到了21FS。枚举枚举第几项,那你要注意啊,它这个索引值一定是数组的最后一个元素,也就是说它Les减几,Les减一最后一项。那所以说这块怎么整,那就是这点a tr info是不是那个属性的属性值。
15:03
列表的Le。减几减一。对不,那所以说呢,咱们呢,回首呢,再测试一下子,你看啊。你好。走走。走,比如说咱来个内存对吧,自动聚焦没问题,以及新增它们是当前属性值数组的最后一项。对,不是不是也自动聚焦了。对吧,这也是没问题的。对吧,以及你看咱们添加属性,这其实也是一样的,你看比如来个颜色。当老师一点击添加属性值的时候,它是不是也自动聚焦,因为也是属于属性那个数,属性值数组那个数组的最后一个元素嘛,就一个嘛,也是最后一个嘛,所以N减100大点for这不也聚焦了。所以说这块呢,一定一定要注意。
我来说两句