00:01
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,要开发平台属性管理这一部分的模块。那咱们呢,先把三级联动静态组件部分给它完成。那咱们呢,先看一下子已经写好了这个相法。那这一部分呢,是属于平台属性管理模块。它呢是分为上下部分的。那么如果细心细心的小伙伴,你会发现,上下这两部分最外层的盒子是带有阴影效果的。那其实啊,这个效果呢,利用的是饿了么UI当中这个cut组件。你会发现啊,Cut组件的外层是不是就带有这种哎,阴影的效果。对吧,那以及在上面这一部分,它是带有一个三级联动的效果。那也就是说咱们这里面呢,要用到放,而且还是行内放,什么是行内放呢?就是一行上可以放多个表单元素。
01:05
那咱们接下来呢,去回到咱们的组件当中去完成相应的静态组件。那找到了咱们的at tr这里。对吧,那咱们要去搞搞咱们的静态组件。那首先说顶上与底下呢,咱们呢,可以放两个EL杠看。OK吧,这是顶上部分,那以及还有底下的部分。先把它整体的大框给它搞起来,其实大框搞起来之后,那剩下的就好搞了。那咱们可以看一下咱们的平台属性管理,这你看上下的结构是不是就出来了。但是要注意啊,这两个卡之间呢,是有距离的,那所以说啊,咱们再写点样式,我给它呢,加一个外边距上下呢20左右零像素,那咱们看一下是不是有相应的。这个间距,哎,这是没问题。
02:01
那接下来呢,咱们就要完成咱们相应的三级联动的静态组件。但是呢,要注意啊,你看一下已经写好了这个。那你会发现这个三级联动这个效果在平台属性当中他用到了。以及在PU模块当中它也用到。那所以说啊,咱们呢,完全可以把这个三级联动的业务啊,给它封装成一个全局组件。将来你要用是不是直接用就可以了,对吧,那所以说啊,咱们的全局组件,一般共用的组件呢,都放到咱们的comp里面。那咱们呢,新建一个文件夹,咱们就叫做cat green菜单SE对吧?啊菜单下拉框。那当然啊,咱们得有咱们相应的组件,那组件呢,咱们先找到这个文件,应该是comp下的它。
03:01
那咱们呢,来一个叫做index.view。那咱们呢,先生成一个模板结构呢,咱们呢一会再说里面呢,老师给来一些文字叫做三级联动啊,三级联动组件。那当然啊,他将来呢是一个全局组件,那咱们呢,可以在命点GS当中啊,你给他引入一下,注册为全局组件。那所以说在这里啊,咱们引一下咱们的组件import。对吧?I import叫什么呀?叫cat category。From,从哪引的?是不是从咱艾特下的?应该是哪啊?应该是咱们的艾特下的,Complement comps下的。下载谁呢?咱们来看一下吧,是不是就是cat green light?对吧,那咱们呢,给他引过来。
04:00
当然啊,你要给他注册为全局组件,那全局组件当中啊,你可以给它加一个name啊,比如说咱们就叫做cat flag。对吧,那咱们呢,就可以回到入口文件了,因为这个名字咱们可以通过点点name是不是获取到,那咱们呢就可以注册哎,全局组件。那应该是v.complement com。对吧,这个老师呢,给它关一下没用的,给它关一下comp comp。那组件的名字叫什么呀?那咱们是不是应该叫category select.name。对吧,这不就是咱刚刚写的那个name,以及哪个组件呢?那就是咱们的相应的category。那咱们的回首回到咱们的组件当中,应该是回到哪个组件,是不是回到咱们product下的AR这里?
05:02
那咱们的需要用一下子在这儿,咱们用一下三级灵动。那应该谁,是不是就是category select,那咱们来看一下咱们封装的这个全局组件O不OK,在这里能不能用。对吧,那咱们呢,保存一下。把没用的先给它关掉,保存一下,那回到咱们的项目当中,看一下效果有没有相应的汉字。对吧。那那咱们再看一下吧,应该是咱们的标签啊,在写的时候啊,对齐的时候出现问题了,对吧?啊这多了一个空格,那这回呢,咱们看一下子,咱们三级联动的组件是不是就来了。那剩下的活无非是不往里边放行内的表单元素就行了。那咱们呢,去看一下,那里面放的是放,那咱们找一下放。而且呢,要注意一件事。那咱们最开始用的是这种典型表单对吧,一行放一个,但是你要注意这回咱们是跟一行放多个对吧,而且都是啥下拉菜单,那所以说咱们用到的是用到的是行内表单。
06:09
比如说一行可以放多个表单元素。那咱们呢,就直接把它的结构给他带走。对吧,那直接复制粘贴到咱们的组件当中。那找一下咱们的组件应该是谁呢?是他。对吧,哎是它,那咱们呢,把相应的结构啊,你给它捞过来。那咱们呢,稍微呢,格式化一下,以及咱们的也得看一下。对吧,啊,这样老师给他插一下,它一直在转圈。哎,这个Vs code有的时候会出现一些小问题啊好,那这回呢,咱们呢,给它格式化一下,格式化一下呢,至少呢,它好看一些。OK吧,那咱们看一下,那首先说咱们做一下笔记,这里面呢,有一个叫做阴烂的这样的一个属性,这代表什么,代表的是哎,代表的是行内表单。
07:03
什么叫做行内表单呢?哎,表单啊,表单代表啊,一行上一行,哎,可以放置多个表单元素。对吧,哎,表单。多个表单元素。那当然啊,咱们现在呢,不需要收集数据,这些动态的咱们不要。以及啊,咱们的三级联动啊,要都是什么呢?要的都是select下拉框,那咱们先运行一下,先看一下。对吧,当然他有的有可能会报错,对吧,你看它指定报错,为啥,因为有些数据还是没有。对吧,那咱们还先看看,那首先说像这个咱们不需要input,那第一个item就给它干掉。对吧,因为咱们需要的是什么,需要的是这种下拉框。对吧,那以及这个按钮咱们也不需要,咱们只需要什么,只需要一个下拉框。
08:01
当然啊,咱们现在呢,也不需要收集数据,那先把这些给他干掉,对吧,那咱们保存一下。这里一定要注意啊,三级联动咱选用的啥是下拉框啊,那这回咱们看一下是不是有这点效果。对吧,但是你要注意这块的label啊,不叫活动的区域,看着咱们呢,应该叫什么,叫做一级分类。对吧,按一级分类。而且呢,要注意啊,下拉框当中啊,它是有一个什么呀,它是有一个占位的这个文字,站位的这个文字呢,不叫做活动区域,你看人家这玩意叫啥是不是叫请选择,所以咱们这里呢,也给它换成什么呢,叫做请选择,哎,请选选择。对吧,那当然除了有一级分类还有什么,还有二级分类和三级分类,那剩下的活那你无非复制粘贴就行了。对吧,那当然咱们呢,给它格式化一下子,那以及这块呢,应该是二级分类,那这块呢是几级啊,是不是三级分类。那咱们呢,保存一下子去看一下子,那咱们的静态是不是就出来了。
09:05
对吧,当然有一个小细活老师要说一下的,你你一打开控制台,你会发现它有三个报错。报的是什么错呢?说哎,你必须要写这个Y流属性。什么意思啊,就是将来咱们的这个下拉框select,你一定是会需要VGA model数据数据,为啥你看你将来这假如说有三级菜单对吧,你是不是要收集数据,捞取相应的数据,是不是进行展示。对吧,那你将来得用到VGA model,比如说你这块将来,哎,你得写VGA model,因为VGA model咱们应该知道是value和I input的一个,呃,实现对吧,那他既然要求写Y6,咱们为了不报错,先给它Y6先写上。对吧,哎,Value是给谁讲是给select加。好吧,说这咱也给他来个Y空格。啊,先给来个默认的空字符串就行了,为了它防止啊,不报那个警告。那咱们呢,刷新再看一下,那这回这个警告就没了,对吧,那所以说咱们完成了咱们三级联动的静态组件部分。
10:10
那这里呢,也别忘记了,在咱们基础的时候啊,咱们也学过下拉这种菜单的这种啊,VGA model的数据绑定的套路啊,这块可千万别忘了。
我来说两句