00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成PU理内容的切换的操作。那咱们呢,先看一下子已经完成的这个项目po管理模块。那首先说啊,它的结构啊,是分为上下结构的。那么上面呢,是有一个三级联动的这样的一个结构,那么对于这一部分结构,它是没有任何变化的。那咱们呢,主要呢,是把注意力放在底下这个car的组件内容当中。咱们呢,要数一下子底下这个EL-card组件当中的内容切换到底有几部分。那咱们呢,去看一下子。那首先说啊,咱们呢,可以选择一个一级分类,比如说手机。以及手机通讯以及手机,那么当老师选择三级分类的时候啊,比如说选中了手机。
01:02
那么你会发现啊,咱们底下这个EL card的现在的结构呢,是显示po列表。那所以说呢,这是一种状态,那所以说啊,咱们也去做一下笔记,那首先说第一种状态是展示咱们的po。列表的结构。那么对于这一部分结构啊,咱们已经搞定了。那么在EL car的内容当中啊,它除了展示po列表的结构以外啊,其实还有两个结构。那比如说啊,对于添加PU,添加一个类。对吧,或者是修改PU,修改一个类,那么这两者的结构是一样的。那也就是说EL-card的底下的这个EL-card的内容啊,是可以进行切换展示的。
02:00
对吧,比如说添加PU,那么你会发现它这块有什么,是不是还有po的名称。品牌。PU的描述、PU的图片以及销售属性是由这五个字段组成的结构。对吧,那以及咱们的可以看一下的,对于修改po也是一样有这五个字段。那所以说啊,还有一种结构的状态是什么,就是当用户点击添加。对吧,添加PU或者是修改。修改PU的时候,那么也要进行内容的切换。那当然啊,还有一个就是添加SKU,就是添加某一个类的实例的时候。对吧,那你会发现它的字段呢,有很多,那当然这又是另外的一种结构。那所以说这块呢,咱们也做一下笔记,以及还有展示咱们的添加SKU的结构。
03:07
那所以说啊,咱们底下这个EL-card的内里面的内容啊,是由三部分进行切换,进行展示与隐藏的。那么咱们当年写的这个平台属性啊,其实它的底下这个EL杠看的内容切换的比较简单,就两部分,一个是展示属性列表,一个是添加,另外一个是修改。对不,其实就是有两部分内容进行切换的。而这个po管理的模块底下这个EL-card的内容呢,是由三部分内容进行切换展示的。那么当年咱们做平台属性的时候,那么由于它的内容只有两部分,那么咱们呢,可以通过布尔值true和false进行切换展示与显示。那么对于咱们的po管理模块,它呢,是由三部分内容进行切换展示的。
04:06
那么你当然可以选择通过布尔值进行切换与展示,但是要注意,布尔值只有两个值出和false。而咱们的内容呢,是有几部分呢,是由三部分。那所以说啊,咱们呢,可以通过一些其他类型的数据控制着到底显示哪部分内容。对吧,那比如说咱们呢,可以通过数字去控制。那这块呢,咱们呢,回到咱们的组件当中,PU看这。那首先说啊,就是EL-cut。这个不底下这个EL-card吗?它的里面呢,是有三部分内容的。那首先说这一部分内容是不是展示咱们的po列表,这是咱们刚刚搞过的。那么除此之外呢,还有两部分内容,那么咱们以前所做的套路是啥?是不是放哎多个div?对不,哎,多个div。
05:01
那这块呢,老师呢,先写一些文字对不?咱们先测试一下子内容是否能进行切换。那比如说啊,这个呢,是添加po。对吧,或者是修改哎。修改Q。那以及底下这一部分结构呢,咱们给它来一个叫做添加SQ。那也就是说,将来这三部分内容要进行切换展示。那所以说啊,咱们呢,需要通过一个属性,强势属性去控制着,到底谁显示谁敢隐藏。那所以说啊,咱们呢,来一个字段,比如说啊,来一个场景啊。SC这个单词呢,是场景的意思。老师呢,给它赋予一个值零。对不,那么这块呢,老师写一下子零代表的是什么,哎,代表。展示咱们的PU列表的数据。
06:02
对不,那当然将来这个值啊,是由你说了算的,那比如说将来如果数值是一,那它代表什么,代表展示添加po或者是修改po。对不就零一代表什么,代表的是添加与修改,Po那一级啊,你也可以来个二二代表什么,代表的是添加哎。添加咱们的SQ。对不,那么让他默认值为几,默认值为零,那所以说这三部分内容你就可以进行哎,显示与隐藏了,通过微杠数判断。那如果你的场景CE等于几等等于零,那展示的是不是就是po的列表?那如果说啊V杠哨,那如果说你的场景。Cea等等于一,那就显示着添加与修改po。那如果说啊V杠哨,那如果说啊,你的场景。
07:03
V解为二,那就是显示添加SQ。那所以说啊,回到咱们的项目当中,咱们先看一下子,那现在展示的是谁,展示的是不是应该是po的列表。对不图书。电子书刊,电子书没问题。那假如将来他这个SCE这个想是属性的值发生变化的时候,那么内容也可以进行切换。那比如说啊,咱们找到这这不是SCNE吗?你看如果老师把它的值变成一,那你看一下子是不是展示的是添加PU或者是修改po。对吧,那如果它的值是几是二,那应该是添加SQ。对不,咱们看一下子,哎,这个把这个值给它改一下子,就这个值嘛。对不,那是不是应该就是添加SK,那所以说咱们可以实现这一部分的内容的切换。
08:02
但是啊,这里面呢,要注意一件事。咱们当年做的时候啊,是用div去做的,在什么时候呢?在咱们的这个平台属性这里,咱们内容切换的时候是用两个div切换的。但是啊,老师在这个模块当中,这里就不希望再把结构放在这里。那所以说啊,咱们呢,可以把这两部分结构啊,单独的给它拆分为两个组件去进行显示运藏,为什么呢?因为咱们将来这一部分的结构啊有点多,你看一下。你看一下子就是这一部分的结构有点多,你看嘛。那如果说把所有的结构都放在这个组件当中,那将来这块的结构太复杂了。所以说啊,咱们把这两部分呢,拆为组件去经显示与隐藏。那所以说啊,给咱们的po这里给他新建两个文件夹,给他来两个子组件。
09:00
比如说第一个呢,咱们叫做po。对不,那咱们再来一个文件夹,那这个咱们也起个名叫做SKU方。对不,那当然咱们呢,需要给它来两个组件,那咱来一个呗,In带点。对吧,用咱们的模板快速给它生成。那这里面呢,咱们呢,写上写上这句话就是添加。或者。修改谁呀,咱们的po。Po。对吧,那以及啊,咱们的拷贝一份给谁啊,给咱们的SK。那SQ这里面呢,咱们呢,写着画上个文字叫添加SQ。那这样呢,相当于咱们创建了两个组件,那咱们呢,可以把这两个组件引入到咱们的po这个组件当中,作为它的两个子组件。对不,那所以说咱们呢,去引入,哎,写一下引入子组件。
10:03
那就是importt。一个叫做PU放。From从谁那儿引呢?应该是从咱们的点杠PU。放文件夹里面引进来的。对吧,那以及还有一个叫做importt SKU放,那也是从哪引,从咱们的这个点杠SKU form引入。那千万别忘记引入组件之后要注册的。对不对,这块呢,可别忘记了,咱们引入子组件之后,你要不要注册。对吧,这个老师给他叉掉一下,咱们重新运行一下。这块呢,一定要注意一件事,你现在只是引入,但你没有怎么没有注册,因为咱们的组件使用的时候,咱说过引入注册使用。所以说啊,咱们呢,需要注册一下子。那需要回到咱们的comp。
11:02
对吧,Cots里面进行注册,分别是谁,Po form和SKU form。那也就是说这两个子组件引入以及注册了,那在这里面呢,就可以进行替换了。对吧,那这个是谁,是咱们的PU方。对不,哎,那这块呢,咱们呢,给它写上PU方。那当然这里面呢,咱们得写谁,是不是写咱们的V杠受啊,哎,V杠受值为多少CE等等于几等等一。对吧,那以及还有一个是咱们的SKU。对吧,哎,V啊等SKU from。SKU放那当然啊,这块呢,咱们得写什么,是不是V刚哨。V杠上咱们的乘几等于几等等于二对吧。那其实啊,只不过把结构哎,单独的拆分成两个子组件去进行展示,那咱们呢,回首呢,还是测试一下子。
12:08
那比如说啊,现在呢,老师呢,要修改这个显示数据,咱们可以看一下。对吧,比如说修改为几,修改为一,那咱们看一下找你是不是进行切换。以及修改为二是不是也可以进行?内容的切换对吧,那所以说咱们完成了po管理模块当中内容切换的操作。
我来说两句