00:01
Hello,各位小伙伴们,大家好。那接下来啊,咱们呢,去完成po form的静态。那咱们呢,先看一下子已经完成的这个项目啊,咱们的注意力呢,是要放在po管理模块这块当中。那么首先说啊,用户呢,可以选择相应的三级分类。比如说图书。电子书刊以及电子书。那咱们呢,先完成哪部分结构呢?就是当用户点击添加PU对吧,是不是有相应的结构。那这块的结构呢,和修改po它们的结构呢是一样的。那咱们呢,只是先把它的静态布局啊,先给它完成,那当然这里面动态的数据,咱们呢,稍后再做处理。那所以说啊,咱们呢,以完成的像这块的结构啊为标准,去搭建它的静态。
01:01
那所以说啊,回到咱们的项目当中,那咱们呢,看一下子。那首先说啊,用户啊,可以选择三级。联动的数据,那么当你点击添加PU或者是点击添加呃,修改PU的按钮的时候,会进行显示相应的结构。那所以说啊,当咱们点击这两个按钮的时候,才会进行内容的切换。那所以说啊,咱们呢,找到这两个相应的按钮,给它绑定相应的事件,以及切换场景去吸引它的静态。那所以说啊,咱们呢,找到咱们箱的组件,找到它的箱的结构。那首先说先看这,那这里是什么,是添加po,那不就是这。那这块呢,还有一个小细活,咱们呢,也就给他做了,就是咱们的这个按钮的可不可以使用的这个操作性。
02:02
那首先说。当用户选择三级分类的这个选项的时候,如果确定了之后。对吧,它是可以使用的,但是如果你没有选择三级分类的数据,它是不能使用的。对不?你看三级分类的数据没有选择它是不能使用的。但是如果三级分类有数据了,是不是可以使用?对不,那所以说啊,咱们的这个按钮,它要有这个disable的这样的一个属性,那咱们给他写上,对不冒号disabled。但是这个属性值是什么,咱们要琢磨琢磨,你看啊。那首先说三级分类你没有选择的时候,那他的cat gr3id应该是啥?应该是一个空创。那么空串制反变成针,那它是不是真的不可以使用?那如果选择了某一个产品,比如说电子书,那么categra ID是有相应的ID的,那也就说是非空字符串,非空字符串也是抓成簸之针,那你加上一个非那false是不是就可以使用了?
03:14
那所以说它的这个disable的这个属性值是什么,就是咱们的cat gr3ad进行制法,对不cat goryy3id。那回到咱们的项目当中,那咱们看一下对吧。那你看这那现在咱们的CATEGORY3D它的属性值啊,是一个空创,对不,初始值是一个空串,那所以说加上一个非,那变成真是不是真的不能使用。那如果说你的属性值有了,那再加个非变为false,是不是就可以使用。对吧,啊,这是他。那以及啊,当你点击添加po或者修改po的时候,那么你应该展示的是PU放这个组件。
04:02
那也就是说需要让它的这个sce的属性值变为一。那什么时候让这个SC详是数据变成一呢?是当你点击这两个按钮的时候。对吧,那所以说咱们找到相应的这两个按钮,那一个是这。那所以说啊,咱们呢,给他绑定一个单击事件艾click。那咱们呢,起个名字。那这个名字叫做什么呢?咱们就叫做ADS po添加po。那么当你点击它的时候,会触发相应的回调,那当然咱们现在没有写这个回调。那所以说在咱们的method当中去写它相应的回调。对吧,那这块呢是什么,咱们呢也去做一下笔记,那这个呢是添加PU。按钮的回调。啊,指他。那么当你一点击的时候,会触发这个函数,那就让咱们的SC的值为几为一?
05:07
那咱们呢,回到咱们项目当中,咱们呢,去查看一下子,去调试一下子,所以。刷新。手机。对吧,手机通讯手机一点击没问题。那以及还有一个按钮就是谁啊修改咱们的po,那它呢应该是在哪呢?咱们呢,看一下结构刷新。他们应该是在table的最后一列对吧?哎,应该是第二个按钮修改po嘛。那所以说啊,咱们都去找一下它相应的结构,在table的最后一列。对吧,哎,当然咱们这里面呢,都要给它变为hi button对吧?哎,这应该是hi button。那这块呢,咱呢也给它改成hi button。对吧,那以及底下这里啊,都是一样,给它改成hi button hi button是咱们自己封装的那个全局组件啊,叫做hi button。
06:05
对吧,啊。那以及啊,底下这里呢,咱们也给它改一下子叫做hint button,那这儿也是一样叫做hint button。这样呢,咱们呢,先保存一下子,先看看结构O不OK。对吧,哎,刷新看一下。那结构是没有问题的,那以及是当你点击这个按钮的时候,那咱们呢,需要给它绑定一个什么呀,说绑定一个事件对不at。那这个事件咱们叫做什么,叫做修改up date,那修改什么呀?是不是修改咱们的PU,那当然啊,将来啊,你要修改某一个PU的时候,你是不是要相应的把这个类的数据是不是要传进来。对吧,那某一个PU,你点击那PU不就是肉吗?所以说啊,咱们呢,先把这个参数先给它传进来。
07:00
对吧,那所以说咱们去写一下这个回调。那这个呢,咱们也做一下笔记,那这个呢,是修改某一个哎,某一个po。对不,那当然这里面呢,咱们这个肉呢,暂时先用不到。对不,因为咱们现在也没有做修改的操作,咱们只是关心静态,所以说咱们也是一样,这点CEAE等于几等于一。对吧,那所以说回到咱们这里,咱们呢,还是测试一下子手机手机通讯手机对吧,那以及点击修改的时候也没问题。那咱接下来呢,就得完成它相应的什么呀,是不是相应的静态。那静态呢,咱们呢看一下。那首先说啊,它的静态呢,相对而言呢,不是很难对吧,那说白了就是一个form表单。对不?而form表单当中有多少项啊?数数一项、两项、三项、四项、五项,以及还有一项,这也是一项六项,为什么老师说保存和取消这也是一个item呢?因为你会发现item与item之间是有缝隙的。
08:11
对不对,你看item与item之间是不是有缝隙的,所以说这一块的呢,其实也是用一个item对吧,两个item之间是有缝隙的,所以说是六个item。那所以说啊,回到咱们的这个组件当中,咱们呢,去书写它相应的静态对吧,那不就是这里。好了,那咱们呢,一点点去搞一下子,那这里啊,它采用的是谁啊,是EL-for EL杠,哎,没有提示这个老师呢,给它关掉一下,咱们呢,重新给它拽起来。那首先说啊,它这块呢,用的是谁啊,用的是咱们的EL-form。那咱们呢,就就耐住性子一个个来就行了,EL杠,Four。那首先说咱们呢,暂时呢,先不写动态的收集数据,Model先给他干掉。
09:01
那以及啊,它这块呢,有一个叫做label-Y等于80,什么意思呢?这块呢,老师要说一下子,如果说你给EL-form加上label等于80像素,那要注意所有的item项会继承这个属性,让每一个item项的这个label它的宽度是80,这样就横排了。对吧,那所以说啊,咱们的一个一个来,那首先说第一个看一下子,第一个呢,叫做EL-for。杠艾,它是一个什么?它是一个音铺。对不,那咱们呢,暂时呢,先不需要收集数据,所以说model咱们先给他干掉。那看一下子,它前面这个label是什么,是PU的名称,那咱们这里面呢,也给他写上什么呀,就是PU的名称。那这里面呢,老师要说一下的还是它,那么把label-white等于80放在这的好处是什么?以后剩余的那五个item就不用一个一个去写了,写这个label杠。
10:07
那么都会继承,也就item都会继承form的这个label-Y的这个属性。OK吧,就不用一个一个去书写了。那接下来呢,咱们先看一下咱们的这个对不对。对吧,啊,要注意人家这玩意儿吧,是有什么是有place holder叫po名称,那所以说咱们呢,也给他来一个叫做place I holder。啊O。那这个叫什么呢?叫做po的名称。那咱们呢,还是得自己回首看一下的,对吧,这是没问题的,那以及底下这儿呢,要注意一件事,品牌。品牌你会发现啊,你看它这块是有真实的数据的,对吧,那也就是说你看啊,当点击添加PU的时候,诶,你看啊,它这块是有真实的数据的。啊,那所以说这些真实的数据呢,一定是要发请求的,但是咱们目前而言啊,不用去操心他什么,这些数据怎么来的,怎么搞的,咱们只是完成静态。
11:08
对不,所以这块呢有个下拉框,那咱们呢,再搞第二个,那这个老师给他折上。再来第二个it EL杠放。那它应该是什么?是下拉框,是select。对不,那他呢,也有他的label叫啥叫做品牌,那咱们这儿呢,也给他改成谁,是不是改成咱们的品牌。对吧,那以及啊,咱们的现在呢,也不需要收集数据,为到model给他干掉。那以及他呢,也是有一个place holder叫啥叫做请选择品牌,那咱们呢,也给他来一个叫做请选择品牌啊,叫做请。选择品牌。对吧,那以及label和value啊,咱们的目前呢,先不用去搞,对吧,就让它默认是它就行了。那咱们呢,回首呢,去看一下咱们的这个O不OK。
12:00
对吧,哎,没问题的,但是你要注意啊,控制台当中啊,它会有一个报错。它提示的信息是什么?是咱们的这个select的组件,它没有写这个Y6属性。因为咱们将来的这个select EL-s select要进行数据双向绑定收集数据,咱们应该知道数据双向绑定应该是用V档model v-model呢是可以既绑又可以收集,对吧?所以它提示咱们呢,没有写value,那你先给它写上一个value,没个空,让它至少不报错就行了。对吧,咱们的刷新看一下对吧,这回就不报错了,手机手机通讯手机找你对吧,这不品牌就有了吗。那以及啊,底下这呢,还有一个叫做po描述,但是你会发现这玩意它是个什么呢?是一个test。但是要注意饿了么UI当中是没有EL-test area,那这块怎么做的?很简单,EL杠,For杠,咱们也是用input去做。
13:00
那咱们先看看它前面这玩意叫啥叫做PU的描述,那咱也来一个叫做PU描述。那咱们呢,也是不需要收集数据的,但是你要注意啊,如果你现在放的是EL杠音铺的,那它就是一个音input的文本框。对吧,咱们可以看一下,它现在就是一个文本框。但是你会发现人家这个明显是一个啥test AR,那这个怎么搞呢,很简单。给他加一个type的属性。属性值为什么呢?为test a test away就可以了。对吧,回首呢,看一下咱们的这个,你看是不是就有了。但是你要注意啊,咱们的大小啊,好像没有人家的这个大,你看啊,人家这个默认这个多大。你看你看一下人家的这个。对吧,是不是还是挺高的,而咱们的这个呢,你看老师给你刷新,你看一下子。你看一下。对吧,不是很高对吧,那所以说啊,咱们呢,可以通过肉的属性去设置肉。
14:02
对吧,哎,肉。老师呢,让它的肉呢,为多少呢?为四,或者你看老师先写个40,你看它有没有变高。刷新这样呢,咱们看一下有没有变高。对吧,没有应该是叫啥叫肉汁多一个S啊肉。只要你看老师给他来一个40,你看是不是变高了,对吧,所以说咱们这玩意儿吧,他没没有这么高,所以说咱给他来个四就行了。对吧,来个四就行了,好保存一下看一下对吧,这是它,那以及啊它呢,也有是也有这个什么呀,Place holder place holder叫什么呢?叫做po描述,那所以说啊,咱们呢,也给它加一个holder对吧?哎,Place。为什么呀?为描述。哎,对吧,哎,别写跑偏了描述。那以及啊,咱们呢,再往底下看看这个呢,老师呢,也给它放在这儿好吧,咱们保存一下子。
15:02
这咱们呢,也回首看一下,这是没问题的。那以及底下这里啊,叫做PU图片,但你要注意啊,这个可不是咱当年用的,那那那个upload了。他用的是什么?用的是照片墙。什么是照片墙呢?就是可以上传多张图片,咱当年的那个上传图片只能上传一个,而这个用的是照片墙。那所以说啊,咱们呢,可以接着搞这个老师先给它折上,咱们再来一个叫做EL。放it。那这块呢,咱们呢,就不需要用input了。这块呢,咱们,诶这个老师给他删掉,那这块呢,咱们先给他写上label叫啥叫做po。PU的这个图片,PU的图片。哎,图。图片。那你要注意啊,这里面呢,咱们要用到饿了么UI当中的一个照片墙的这样的一个组件,其实它也是谁呢?就是咱当年用的那个upload。
16:00
Upload上传。但是啊,咱们当年用的是用户头像上传,它只能上传一张图片,这回咱们用的谁用的是照片墙,你看这个照片墙呢,他呢是可以上传多张图片。对吧。啊,这个呢,一定要注意一下子是用的是它。那所以说啊,咱们呢,把它呢给他拿过来看下这啊。那首先说呢,一定要耐住性子,一点点去捞,把人家自己写好的东西给捞回来就行了。首先说啊,它的这个组件一样upload。对不?咱们呢,先给它捞过来指他。老师呢,给他格式化一下。咱们呢,稍微呢去看一下的它的这个结构啊,这个老师呢,重新给他跑一下子吧,格式化的时候,这个插件有的时候会出现问题啊。行,这个老师呢,给他格式化一下,咱们呢稍微看一下子啊,你看一下它这块的结构啊。那首先说啊,它用到了一个EL-upload的这样的一个组件。
17:03
那首先说action是你图片提交给谁?以及这是里面有一些它相应的属性,以及啊还有一些需要回调写回调的地方,那当然这块呢,咱们呢,先不用管它是什么,等到咱们要用到开发这块的时候,咱们再说。对吧,以及还有个ii是什么加号对吧?以及底下用到了一个dialog对吧?哎,这个组件咱用过dialogue对吧?以及显没显示这张图片。那咱们呢,把它给它拿过来,以及它呢还需要两个属性,这两个属性呢,咱呢也先都给它直接粘过来,对吧,这来一个date。那以及啊的是一个对象。那这块呢,咱们呢,也先不知道这两玩意是干什么的,先给它放在这就行了,那以及底下还有两个方法对吧,那这两个方法呢,咱们呢也给他带走吧,Method。对不?哎,这个老师呢,给他折上,在这给他也拿过来。
18:02
因为咱们现在考虑的不是业务啊,咱们只需要先把它的静态先给他完成。那咱们呢,回首看一下,咱们这里有没有OK。对吧,哎,走。对吧,这是OK的。对吧,哎,这是没问题的,你看它是不是有dialogue,你看这不就对话框吗。Diallo不是可以显示弹出一个这样的对话框吗?显示这个小狗狗嘛,对吧,以及还有删除按钮对吧,可以删除。对吧,啊,其实它这个功能还是挺完美对吧,那所以说咱们的静态呢是没问题的。对吧,那这块呢,咱们稍微看一下子啊。所以说EL-upload,他是谁?你知道,他这有个家。其实就是谁,就是当前这块的结构。对吧,你看嘛,EL upload upload里面是不是放了一个icon plus加,那不就是这吗。对吧。以及你看它这块是不是有一个dialogue dialogue,再通过visible.think think这个属性,咱们说过修饰符是不是可以让副词组件数据同步,在控制着这个dialogue是否是显示与隐藏,你看嘛。
19:10
真还是假?对不对,对吧,所以你看这不diallo显示与隐藏吗?你看咱可以看一下子。这不是显示隐藏,显示隐藏吗?以及你会发现Di love当中这个图片,咱用这个image的src吗?这不就是那个图片的路径。对吧,当然他还有写了一些回调,那这里面咱们先不管对吧,咱们还是先把注意力先放到它的静态当中。虽然po描述咱们给它完成了,还有谁咱们再看。还有相应的销售属性,有个下拉框和一个按钮和一个table。那所以说咱们接着来,那这块呢,再来一个什么EL杠。For杠。对吧,It那这个呢,咱们呢先不要这个input,那这块呢,咱们先看它叫什么叫做销售属性。
20:04
对吧,那咱这label就是销售。属相。对吧,那这个item当中呢,放着几样东西呢,放三个select button和table对吧,那所以说咱们来,那这个呢,先来个select EL-for a select。那这块呢,咱看一下他有没有。Label啊,这块呢,它是没有的,那没有呢,咱们呢就啊这这这多了一个,多了一个应该是EL。Select,对吧,I。那这块呢,咱们呢,目前而言啊,这样式的吧,哎,这样走EL杠。哎,没提示了是吧,没提示给它关掉。咱们重新搞一下。看着那这块呢,应该是什么呀,应该是EL。对吧,EL杠。放之后呢,找到咱们的select对吧。那这样咱们看它是有这个label的,Label的是叫做销售属性。
21:01
哎,销售属性,那以及咱们也不需要收集数据。这样给他干掉。那看一下他的place holder是什么?是还有三未选择,那咱们先写死他,还有三未选择。对吧,那这儿就是还有。三为选择对吧?哎,叫做为选择,那当然咱为了防止报错,给这个Li加一个value。对不,哎,只是它。之后呢,咱们呢,先看一下咱们的啊,看一下O不OK。对吧,没问题,那以及后面呢,还紧随一个按钮,叫做添加销售属性。那咱们呢,在它的后面紧随一个一杠八。EL杠,哎,又没有提示这个插件是有问题啊是吧,哎,EL。行,咱还是切换一下吧。Johnny之后呢,这块呢,还有一个按钮,那咱们叫做EL-button,但是你要注意它是有icon。
22:06
对吧,应该为EL-I-plus。对吧,EL杠。Icon杠。Plus这个呢,叫做什么呢?咱们看一下啊,叫做添加销售属性,对吧,添加销售属性。来写一下子,叫做添加。销售。属性。对吧,之后呢,看一下咱们的结构也是没问题的,那以及底下还是有个table table呢有几列,有四列,而且带包子,那所以说啊,咱们在底下这再给他来个table EL-table。对吧,那之后呢,咱们现在目前啊,是没有数据的,这个给他干掉。哎,之后这个style老师给他提上来。以及呢,这个table呢是有边框的,所以说咱们给它加一个border。以及啊,咱们的这个table老师给他格式化一下,它是有四列的,那咱给他来一个。
23:05
两个三个四个对吧,格式化一下。征呢,分别看一下它的这个label的名称分别叫什么,叫序号,属性名,所以咱们改一下这个是序号。对吧,序号这个呢,是属性名。哎,属性名之呢,看一下第三列叫做叫做什么叫做属性值名称列表,那这个咱也改成叫属性值。属性值名称。列表。对吧,以及最后还有一个呢是操作。这个咱搞一下叫做操作,那以及啊第一列咱们应该熟悉它的套路对吧,宽度呢,咱给他来一个80。80像素。之后呢,它呢应该是索引值,那咱们应该写成type为谁呀,为这个in desk。对吧,那以及让他的alone a alone为center。
24:05
对吧,之后呢,咱们呢,去看一下咱们的静态有没有OK。对吧,哎,没问题的。那一集在最底下这儿呢,还有一个item是有两个按钮保存跟取消,那所以说咱们呢,把这呢给它折上。对吧,其实就是在最底下,这是EL杠。Four。我给他关一下。这个组件,这个插件有的时候会出现问题啊。EL,看一下有没有提示,没有没有给它关了吧。这个是好烦人是吧。行。之后呢,咱们呢,看一下呢,最后呢,还有一项,那就是EL杠。Four杠。在这里面呢,他呢是看有没有label,它是没有label。对吧,所以咱们把label给它去掉,这它这里面呢,有两个按钮对吧,一个是保存,一个是取消,那就是EL-button。
25:03
对吧,那这个呢是保存以及呢,还有一个按钮EL-button,但是它没有颜色,所以咱们把T去掉。这个是什么,这个是取消。那所以说回到这儿,咱们看一下咱们的静态应该是没有问题的。对吧,图书电子书刊电子书看一下。OK,没问题。那所以说啊,咱们完成了po form的静态对吧,所以说静态呢,只需要一件事,啥事耐住性子一给它搞定就行了。而且在工作的时候也要按照这个顺序啊,先把静态完成,再去琢磨他的业务逻辑,对吧。
我来说两句