00:00
来,那下面呢,我们来开始去做啊,商品的添加和修改的功能,我们前面说过,他用的是同一个什么。同一个路由组件叫什么来着?I update。是这个吧,啊,用的是同一个。我们先不用想那个太想,嗯,添加和修改的区别,我们先来看一下,点击它应该是一个什么样的情况。是不跳转路由啊。先跳转过来再说,我们现在跳转都跳转不了。看到吧,来先跳转过来找到啊,先回到我们那个组件后组件。不是啊,就这个后来。找到我们的那个,我们是不是一个添加商品添加的位置。
01:01
在这里面需要加一个什么on,等于直接在做就行了,因为比较简单,我要跳的路由怎么跳this列,Pro列。点什么?Push可以吧,因为回退吗?Push好路径是多少呢?也就我点啊,大家看到我点它。这是商品添加的这个界面是斜杠或者大杠,斜杠什么。I out是吧?啊,这个路径理解错了没问题吧?没练好,那这样的话我们就可以进行嗯,跳转了,我们来试一下点它是不是可以跳过来呀。当然这个界面我们还没什么没写。比如这一个界面,然后就跟以前有很多相似的地方,只是下面这些。男的有三个。
02:00
第一个第二个,第三个。前面的几个比较简单,我们先把前面的界面先搞出来,整体界面先搞出来啊,其实这些都跟前面很像是吧,整个是个什么。Co。来,我们先写写界面啊。啊,大括号from d是吧。首先整体是个看看里面这是一个大的表,干吧。我们这次还是用一下啊来。那叫什么呢?Form,因为我们要现在做表面验证,所以最好用form来证。好放里面接着往里面看啊,这一个是一个什么。而且form是不是有一个A来着。那我们可以简化一下,看我这么写,看行不行啊。我写个大号等于行吗?
03:01
各位。可以,我们前面是不是写的form item,那说明能怎么写?好。这一个是什么呢。啊,这一个跟一般的input呢有区别。是不是稍微有些区别,那这个地方啊,我们来看一下,也是用的input组件,但不是用它本身。我们来看一下啊,我们当前用的这个三是哪个呢?看好了是这个效果你看。是吧,那我是不是就垃圾心。那么so easy的设计呢?打开它,看它用的什么?在哪里?Input里面,诶,它这个设计还挺不错是吧,统一都看到是input把那个text error都行的输入框放到它里面了。
04:04
好,没问题。来看还有什么啊,还有什么啊,看一下接着是这个也是音的。这个是input的另外一个东西啊,加了后面的一个后缀类似。练清楚吧,下面这一些这一个是用的什么呢。你知道这个叫什么效果吗?叫级联,级联多级菜,多级列表啊,叫级联列表,有时候也叫二级列表,二级联动的列表,或者叫三级联动列表,这种效果在什么时候会常见呢?选择那个地区。对吧,选择层次的时候就用这种类似的效果是吧。这能听懂吧?嗯。这个会用到一个组件,我们也来给大家看一下啊叫。
05:01
大家看看。叫选择。啊,也就是说我们要用它是吧,来把它也读一下。这边知道吧,好,下面这一个。这个功能看起来还是挺强的,这是一个图片上传的一个组件。啊,这个也用到它里面的一个组件。叫什么叫upload?阿拉什么意思?上传吗?不用在外面打开啊。嗯,来看一下上传的组件,而我们最终用是他这个进行改造写出来的,咱最终效果其实跟这个你们觉得其实是差不多的,看到吗。能看到吧,啊,当然啊。
06:00
你就有这个代码,我就得把这个代码给你,你你现在想实现我们的功能也费劲,其实也比较费劲。并不是说别人写好一个效果,你就直接拿到项目里面,不用改就能用,需要改造。啊,需要改造。但至少有了一个基本的思路啊,这个也挺好了,好,这个时候有一个组件叫什么load。有吧,嗯,有最后一个就不是2D的组件了。是另外用的组件啊,这个呢,我们最后再去说啊,再说好二的组件就是这么几个。明白。好,最后其实还有一个,最后下面一个还有一个是吧,这个也太简单了是吧。那吧,好来,下面我们就开始写了,这下个轻车熟路,因为咱已经写好几遍了,看的来个什么table是吧?X没有,因为它就是一个。
07:04
左侧的一个东西,右侧没东西吧,啊,所以就要开头就行。抬头这个东西啊,咱也写了几遍了啊,大家看到这整个是一个板吧。跟咱前面一样啊,啊,这个失败呢,接着来一个什么啊,宁可。宁可帮你来个什么?Let icon是吧?I can需要有个什么type属性,而type属性等于什么a row什么,因为向左嘛。是吧,向左是啊的箭头好。Link button需要干嘛?引入这引入要在这个中间put a from点点斜杠,点点斜杠啊components下面的link。
08:05
这个没问题吧。Link发展写作了是吧,少了一个什么。少了个T。没什么,那你啊好,那下面是不是还有一个是吧,叫添加商品是吧。添加商品,来一个吧。好,下面呢,我们可以稍微的去看一下咱的一个情况,那这里面缺少一个什么。I。看到没引入是吧,需要去引入I。行吧,你要觉得这个小一点,是不是可以把它的那个加一个样式,让它大一点就行,写什么。啊,死掉,接着是死掉。
09:04
那个接着是什么方,Size是多少对不对,比如说来个20稍微大一点。大起来吧,嗯,好。这里就没什么问题了啊,就说的是头部,那头部下来以后是不是一个整体是个表单呢。那应该做什么?哪一个整体是个什么风,对不,每一个都是一个什么还。能懂吧,而这item里面需要第一个是一个什么input商品名称吗?那也就是说这个地方来一个什么input呗。能看到吧,啊,需要有一个提示叫place hold,点错名字了,这个就是商品名称啊,可以吧,可以,那下面呢,是不是跟这个类似的啊,我们也可以先看一看,可能还有别的问题。
10:12
这有些问题。有什么问题呢?左侧是不是需要这个。能懂吧,这个东西是什么?这东西不是我另外写的标签,它是内部可以指定的一个属性,叫左侧的level。来这个东西应该知道。没用过这个,这是一个标签呢,是吧,这个左侧的我们把它称为level,好,那这个怎么指定的,这个得去看一下。啊,文件文件的一个找那个form。找到这个表单,表单里面很多这种效果的。比如说最后一个看呢。最后这一个大家看看这这里面是不是有很多这样的效果呀。
11:05
能看到吧,能看到,那我们啊找到这个吧,这个这个这个有啊,看一下也是一样的啊,我们来看它。他怎么做的?来看好了,这个叫form item里面有一个什么level,那我是不是也用level记准。嗯,正好一个比他好搞啊,这里面来一个什么。这写什么?是不是商品名称?这能听到吧,你这个单你也可以写,请输入商名称是不是也可以。可以吗?可以好,接着继续看啊,还有问题。你看它这样默认是不是啊,上下排列的,因为呢,这个呢,这个整个占占整个一行能听懂吧,那它这个怎么做到的呢?那是不是得去看他呀。
12:00
来看长。这个每一个啊,这里面的一些form,它会它这个form里面呢,大家看好了。它这个form里面有一个form的什么呢。From it吗?Layout。能看到吧,而且这个东西啊,我测之后可以放在某一个,针对某一个爱做,我们先按它的整法整,它是不是放在缝上呢。那我也我学他做呗,这东西吧,它能实现效果,我应该也能啊是不是。啊,把这个拿过来。去用来,大家看到这个名字,你就知道它是用来去指定什么form母的it的什么。布局的对不对。能听到吧,啊好,那这个时候来看到这个时候我们就在这里面写个什么,哎,不是写一个写一个。
13:00
呃,解构的。扩展的预算部对吧,来个他。能看到吧。我现在看一下效果,我们再慢慢去看,他那都什么意义,它有什么用啊。游泳。有吧,有实际上是什么意思呢?不是居中的效果。这个左侧来占了一定宽度,而这一个占了一定宽度。听懂意思不?那现在之所以不太好的原因就是这个左侧这个宽度什么。陪他。然后我们看最终的效果是这个样子。就看见说很多。那这个怎么做到的呢?来看好这个就要理解它了。这是指定item布局的。呃,配置对象好,这个名字不能随便瞎写,它指定好了,这个是指定什么。大家知道我们整个它的三个系统整个宽度是多少格来着。
14:04
24格能懂吧,24格,那他现在也就是说它的左侧那占几格,六格的宽度是不是,是不是左侧那个的宽度。这能听懂吧,那我们这个应该给他什么。是不是指令小一点,比如说啊。能看到吧,这个输入框是不是有点太长了。能看到吧,那我们要把它变短一点怎么办呢?一样啊是因为什么,比如说八。我们最后指定就是八啊,当然你开始才能要试一下才是一个合适的一个宽度,是不是这能听懂吧,这一个啊指令。
15:02
右侧包裹。的宽度什么意思呢?它右侧是有一个包裹的,而我的这个,而我的这个输入框就在这个包裹里面。充满宽度。那你的包裹是不是越小越越窄,我的这个速度框越窄啊?这个的话说白了就是在右侧的宽度,简单来说就这样是不是啊,因为这个rap是包裹的意思啊。好。一个左侧一个什么右侧问题吧。好,那这个写好以后,那其他的。那不就类似老华吗?再来一个下面是什么,上面的什么。描述吧。对吧,那商品描述来请输入上面,关键是商品描述是这个音铺的吗?他不是。
16:03
对不对,他用的是什么text,这个时候我们得去看一下输入框啊,他的这个textl怎么用呢?我们用的是不是第一个效果啊。那就是把第一个text error给了什么呢?拿过来呗,这有什么好说的,对不对?把它拿过来就OK。C。拿到这里是吧。这个的是不是要改成我们的。那个后面有一个属性叫outside,诶怎么没属性值呢?属性值为什么to。对吧,那就不用写了,塞什么东西。自动的一个尺寸,说白了就是到多少行。能听懂吧,那个函数开始默认是不是一行,最后你你一回车号行,它是不是又增加一行。它是自动伸缩的一个高度。来,我们来看一下,看看我们当前的行不行。
17:02
那你说我能不能指定上来,它是两两个高度。可不可以呢?肯定也是可以的,这这种需求你不是常见的吗?大家看到这个是不是上来就两个,那怎么指定的呢。是不是可以可以。嗯,还可以指定是吧,最大的哎,他用的是同一个,大家看呢,用的也是这个属性,只是它的值是个什么呢?这个对象啊。哎,我觉得这个配置也还好,也还可以是吧,那我们就指定为它呗。可以吧?没问题,那这样的话,我们一上来。是不是两个两个高度是不是OK吧,OK好。那下一个是商品的什么价格是吧?啊商品的价格,那商品的价格的话,那我再来一个呗。
18:06
区别来了啊,这里面它主要是后面有一个原商品的价格。啊,那这个时候啊,这个时候是商品价格,那这个地方啊,有个问题,我的这个应该输入的是数值吧。这个地方最好指定type,为什么呢?Number number什么意思,数值吧?能懂吗?好。关键是我这么指定以后你来看一下后面有圆吗?没有家不好吧?是不是那厕所怎么办啊?是不是得看看怎么样形成后面的这个后缀的感觉是不是。找呗,这玩意。
19:01
诶,这个像。是不是这有前面的有前缀有后缀是吧,是不是就是这个效果。那没什么好说的呀,打开呗。听懂吧,打开以后是不是就看这个第一个是怎么实现的吧,找到后面的这里面来看一下input有一个I before,诶这是添加了前面吧I的什么好的得了有了。也就这一个input,写一个它等于多少元。嗯。这不就写好了吗?这个应该没什么吧。啊,OK。这基本的,这是基本的情况,这里面这里面跟前面比就多了两个东西,一个是error。啊,一个是怎么样,在输入框里面指定后缀都不是靠背的,都是文档里面,其实有对应的效果。
20:05
你只要按例,你想做个什么效果,你都要去例子里面去找一找,但一定要具备这个能力啊。不要把这东西写死了,就照着我的写,那样不太好啊。
我来说两句