00:00
大家好,我是学习园地的特约讲师高洛峰,上节课我们做了导航这样的一个组件,当然了,这你可以独立成一个组件,然后呢,在每一个页面里边单独加这个,也可以在那个APP里边把这个组件加上都是可以的,可以独立组件,那咱们这个呢,直接在APP加,你也没有必要把它分独立组件,那咱们就直接在里这么写的,这样的话也比较好找啊。但是呢,嗯,咱们这个项目是固定这样样式,如果不是固定样式的话,你可以把它做成独立组件,然后用插槽的方式,那我们就可以动态的去改变它下面的样式,或者是这样的一个结构,通过插槽可以,那这节课呢,咱们来做一个标题栏,那咱们就用独立的组件,用插槽的方式,你看那上面的名称叫投入兄弟对吧,然后有返回箭头,那这个部分呢,咱们做的时候就不能做成固定的,因为有的时候这个标题放的比如说是搜索栏,对吧,搜索的组件。那有的时候这边没有返回箭头对吧,有的时候这边呢又放上菜单,所以呢,嗯,三部分一般是固定的分成左中右三部分,但是呢,左中的内容是有可能根据我们页面的情况去改变的,所以呢这个呢我们就得灵活处理。
01:08
那我们这个呢,就把它当成一个标题栏,或者是一个导航条都可以啊,那我们把它当成一个导航条,那我们就得新建,既然这样的组件有可能在每个项目里边都去使用,对吧?所以呢,我们最好把像这样的组件不是页面级的组件对吧?一个小组件每个页面都共用的,那肯定在我们的这个组件目标声明,那有可能有可能在别的项目里边用,那我们就把它建到这个里边。那建到这里面呢,每一个组件你最好单独生成,生成一个目录,因为这个组件有可能还有什么子组件之类的,所以我们生成一个目录,我们叫做。啊,叫做什么呢?叫做NAV。吧,导航条。导航条,当然这个啊,目录名你可以怎么,你可以无所谓,比如说目录名你可以小写,但是我们组件名字你可以大写,比如说NAV ER做一个这样的目录,在这个目录下我们建一个组件。是NAV bar就可以了。
02:02
做一个这样的组件,那做这个组件呢,那我们需要一些内容,特别是中间的标题内容,肯定是每个页面是不一样的,所以呢,我们不能用固定的文本,所以在这里边我们组件组件所有都有一个边元素,你就用divv吧,或者你用n NAV都可以啊,然后我们声明一个,肯定得给它一些样式,那我们给它起个名叫做NAV br,写在这里边用ID也行啊,这都无所谓,然后里边呢分成三部分,Div。分成三部分,标题栏是三部分的,看上去咱们是一个整体,其实它是分三部分的,所以呢,里边我们肯定给一个左中右,比如说左的部分。Class给一个默认的,呃,这个呢是中间也是缺少部分CTR中间部分,然后呢,我就再给一个class,等于red用这个部分。点第三部分。那点第三部分呢,那我们现在需要把它做什么,需要把它做成嗯,插槽的这样的一个方式做成插槽。
03:01
做成插槽呢,那我们就需要在这个里边使用插槽的那个,呃标记这咱们讲组件的时候都说过。使用它插槽,每一个都加个插槽,Slotslo插槽,然后加上SLO3部分,每一部分插槽由使用它的组件传递过来,但是呢,三个都是确认插槽,默认会存一样的东西,对不对?所以呢,咱们给它起名字,那我们这块起一个名字变成句名插槽,这样的话我们就根可以根据具体的名字我们去处理哪一个了。名字,然后这里边我们也起一个,呃,中间呢,我们用的用缺省的吧,然后这里边儿有个名字,我们给它起上用。用的时候我们再加进来,这里面内容是不需要的。然后我们这个插槽现在呢,在不写任何样式的情况下,我们现在已经有这个呃插槽了,对不对,那我们怎么用呢?比如说我们在首页里边。首页现在看的比较多了,嗯。
04:00
在。不尿。这些我们不需要的就关掉。我的需要。嗯,在后面页面在这个地方,我们就不用这种去加了,对吧,我们直接加什么,我们直接把我们的这个加上,但是呢,在这里边我们必须得干嘛,必须得导入这个组件。这款。Port导入NAV BA直直接有找这个对吧,但是我们这有别名了,就不用上一层上一层目录去找了,直接通过它这个名字就能找到这个组件,那找到这个组件,那下一步我们需要做的干嘛呀,就在这里边,我们得注册这个组件。注册了一个组件,组件名是NAV。有点长了,而且啊BR注册组件,注册的组件之后,那我们在这个上面这个位置,我们就可以使用这个插槽了。可以使用这个了,那就是NV。B2,好。AV br我们用,因为这是驼峰式命名,那在模板里边可以用这种方式命名,对吧,这也是前面咱们讲基础语法时候讲过的,对不对讲过的。
05:06
那加下来之后,呃,我们这里边儿,既然我们这块需要一个。类叫NVBR,不需要在这里边去写。在底层去写就行了,然后打开,打开之后呢,我们需要传内容,左中右三个都需要传,但是不传的话,让他使用默认的就可以对吧,你比如说我现在想把什么把我们的。呃,右边去传,这里边使用插头呢,在VV3里边用的时候呢,和我们其他语法不一样,如果在VV2里边,我们随便写一个,比如说div,然后我们起一个名字等于什么,就跟这插槽对上了,在这里边所有用的插槽的话,我们得需要用到什么,我们得需要用到模板T通过这个属性。然后这里边儿我们加上,比如说我现在在中间缺少的加图书兄弟,把这个插头加进去,然后呢,在这块使用V-slot。
06:03
使用这个标签,然后我们给缺省的部分加,那中间那部分是缺省的,Deft中间的部分是缺省的,也就是我们在插槽里边,你看它会以这个地方把它替换掉,对吧?当然这里边可以有默认的,有默认的图书兄弟,我们不写就是图书兄弟。嗯。呃,图书商城吧,图书商城默认是图书商城,但是我在首页里边,如果一加的话,就变成了图书兄弟对不对,这里边就这俩名字可相同了,那在这里边,比如说咱们叫做ew shop。默认叫他叫做一上吧。你看在首页这块,咱们在首页这里加了,你看。默认这没有效,它变成了图商城对不对,那这个插头左部的这个插头,那咱们也可以给它去加我们想要的部分,你比如说也是同样的T加一个模板,然后呢,V-SL用名字我们left左部的加这个就行了,假如说我们加一个箭头安的符LT小于号。
07:05
你看这块就有一个小型号,看到了吧,有一个这个当然了,整体的我们得需要有一个呃,背景色的这样的,呃一些去支撑对吧,让所有的样式它都具有这样的一个样式。那我们看一下,既然我们需要把它加一个背景颜色什么之类的,那我们直接在这个组件里边去给样式就可以了,我们通过这个类,也就是点什么NAV-BR。现在,而且M不小了,现在咱们差的是样式的部分,对不对,比如说先给背景颜色,让他能看出来这个背景颜色,背景颜色呢,我们让它变成用高亮的那个颜色,也就是使用我们全局base里边声明的杠杠。高亮的文本。这个吧,啊,看这种绿色跟没有E的logo这个颜色咱们说是一致的那种,对不对,然后字体颜色咱们让它是白色的井号,呃,白色。正好就可了。
08:02
那那变成这样了,对不对,白色的变形颜色加上这个了,那这里边儿呢,那我们需要让它的位置是固定的。位置fixed对吧,肯定的位置得固定上,默认虽然在上边,但是我们上面如果加内容,你看首页,如果我们上边这块加一行内容,它就不是在最上边了,看到了吗?就不是在最上边了,对吧?所以呢,我们一定怎么呢?不管我们加不加内容,都让它在最上面,所以我们需要。在这里边我们把它的位置固定,比如说它的左是零。是零右沿的是零拉伸对吧,左右是零,那它就是什么100%了对吧。然后呢,我们让它顶部也是零对吧,另外呢,我们给一个z index,因为有可能我们下边有滚动的东西,因它是固定在这块,让它再高一点,比如说给个九或者十这样的一个,这样的话,里边有内容的时候,我们这块就不用怎么了,就不用去去管它了。是这样的,那除了我们给这些样式之外,那我们还需要怎么着,我们还需要划分它里边的。
09:03
这个高度和这个内容分成几份对吧?所以呢,我们需要,呃,比如说让里边的内容左中右,因为它里边分为左中右那几个类,对不对,宽度和高度,所以呢,呃,我们先给它一个高度吧,一般的我们这种标题栏的高度呢,我们一般都是下边是50,上边一般都是45左右,四十五四十四。你看都是这样的高度,四十五四十四,所以呢,这个高度咱们得给,然后呢,行高用的居中,行高咱们也给上是呃,45吧。这样的话,让它文字是可以居中的这样的一个高度,然后呢,让里边的所有的文本,TST文本是居中的center。嗯,默认这个它就是居中的,默认就是居中的,然后呢,咱们如果想要下边有一点阴影,那咱们就使用box shadow对不对,加上点阴影,比如说零,然后下边,下边呢,咱就是两个像素吧,或者是跟这个阴影是一样的,三个像素也都行,对不对,然后左右的是零,那个咱不用扩散rgba,这里边咱们也是100R100G100G100,然后呢,是0.1的透明度。
10:10
你看稍稍有点阴影,看上去会稍稍好看一些。然后这块加进去了,但是这块我们没有给里边每一部分的一个宽度,每一个部分宽度,那记着咱上边给类的时候,给了左中右三个对不对,左中右三个,所以呢,我们在这块中间的部分我们就不需要去梳理了,比如说左和右的部分,左和右,那我们让它宽度,比如说50或者是60,因为整个高度是45嘛,对吧,高度是四十五六十稍稍是一个矩形长方形的这样的一个就可以了,就不放东西了,其实是一个方形都可以了,所以你给45或者是其他都可以,那就比如说给60像素。你60像素,60像素这个内容,嗯,没有去完全的去弄过来,对不对,所以我在这里边来做一个布局,用弹性和布局,第1PLAY,我们来一个flex弹性和布局,然后呢,我们让中间的部分占满整个,除了它这个六十六十部分占满整个区域,第2CT2。
11:09
区域,那我这块先给一个背景颜色,背景颜色red红色的,你看一下,你看现在是这样的一个情况,对不对,还有个布局,让它占满整个区域,BLACK1填充整个区域,你看它现在就填充。呃,整个的这个区域了,对不对。这样就可以了,但是我右部分啊,这块没有加上什么,没加点。那左中右对吧。有通用,那我们给上面的统一的一个颜色,那其他的不给颜色里边最好是这个颜色,不然的颜色容易不统一,咱只是看一下这样的情况就可以了。你看这样就行了。然后默认的这个其实箭头其实不太好看,不太好看,对不对,这样的箭头,那我们还可以到什么到这个。呃,图标里边你可以找一个什么,找一个箭头下载。嗯。
12:00
Re e。啊左箭头你看你可以去下载一个这样的一个箭头,这样呢会好看一些,对吧,直接图片式的啊比较呃比较方便,那我们现在就是直接选择白色的。白色的48大小也够了啊,再来。来,左镜头。在这里边这个对吧,把它复制过来,然后呢,到我们的这个图标里边,当然你可以用不用这个图片的方式啊,你可以用这个图标的方式,但是我还得把它所有的重新都加一遍,比较麻烦,所以我在这里边就加这个就行,就镜头。啊,这里边有一个覆盖一下吧,没关系,这样的话我们放左箭头,让它默认这里边儿就使用这个,呃,左箭头就可以了。所以在这里边插槽这里边我们默认加一个img这块,直接咱们说在这里边直接写成图片使用,这个能启用a s ets,这样的话就相当于SR下的这个边名嘛,因为在模板里直接用加上这个,这咱前面说过的对吧,加这个I as下边的咱们左箭头点PNG加进来。
13:08
但加进来我们看一下。大家把这个打开。刷新一下。好像没有加成功,看一下有没有错误。这个模板肯定是不会错的。但是我们这块的确是没有加成功啊,因为你现在加的是默认值对不对,在这里边加的默认的这个箭头,默认箭头呢,因为我们在后面这块已经传了什么,传了这个左箭头了,所以在这里边我们把这个去掉,不加这个,你看就有这个对吧,那我们再把它这个样式我们再加一下。如果你在里边,在不同的页面需要加其他的,你就把那个默认的给它覆盖掉就行了。对吧,比如箭头啊,或者什么都可以通过插槽的每个页面加,但是咱们现在它有默认值,这样的话每个加这个咱就不用去一个一个去处理了,那我们可以让他这里边的LFTT左里边的有个ing,这是它的比如说呃宽度。咱们要是变成45啊。
14:03
小点,然后他会缩放,咱们直接来个party,来个十个像素。大致可以,如果你想再大点的话,再小点的话,你比如说12个像素。嗯,也可以这样就行了,像。可以吧,这个你喜欢你再去调。几万的一条,那现在我们想用这个点击的时候得有效果,对不对,要默认这个点击的有效果,所以呢,我们需要给他加一个什么,加一个点击后退的一个事件。点击后缀事件,那我们要每一个点击,如果插槽想有效果的话,图片,那我们需要在图片这块写对不对,因为我这边不想传别的,那我就在这块可以写吧,嗯,Click点击的时候,比如说回去后退嘛,Go back back,那我们需要写这个方法,在这里边我们用组合API的方式去写set up。在他在这里边写的时候,我们需要。
15:01
既然是回去需要用到导航,所以在这里边我们必须通过路由里边把这个使用use这个方法拿过来,使用路由,咱们得获取路由器,对不对?从小写的vuee里边的router,这是咱们讲组合API里面说过,你得获取这个方法,获取这个方法你在setup里边你就可以怎么着。Cost声明一个路由器,Ru tr路由器,然后又通过我们这个方法创建一个路由器,创建路由器的话,那我们就可以做一个方法。希ST,嗯,Go back,练习K这样的一个方法。我们用箭头函数去写啊,然后直接让Lu UR里边go,你可以是嗯。你这样的话,让它是跳转QSH,你指定pass路径跳转对不对,咱们现在用的历史模式直接用不对吧就可以,比如负一回到上一个页面,回到上一个页面,从哪个页面来的,它就回到哪个页面就可以了。只要直接使用这个去回去就行了。
16:02
这样的话,我们。呃,这个方法在这写,当然方法如果想页面用的话,我们组合API必须得怎么return,返回go back。拜。啊,这块是立下,所以呢不能这样去返回,这样呢,我们点击这个按钮,你看它从个人中心过来的,就会返回到个人中心,我点购物车,再点首页。它就会回到什么购物车,我点分类,再点首页,它就会存到哪啊,回去就会回到分类页面,所以呢,这个方法是好用的,那这个方法好用的,那是不是我每一个都需要加上这样的一个标题啊,比如说这是。嗯,图书兄弟,然后我们到分类页面。把这块改成这块写上。分类,嗯,商品分类,商品分类,然后我们还需要这个位置写上。商品详情。商品。
17:00
详情,然后这个写上个人中心。选用这个组件,个人中心,然后还有一个购物车。这个位置我们加上。嗯,购物车。那这几个都加了,当然了,我们得把这个。都拿过来。首页分类页面。我们必须得保住这个组件,对不对?还有商品详情页面也得加。所以的多个页面可以共用的,然后当然了,你可以把这个也写在里边,都是可以的啊。这样的话,我们每个页面就都可以使用这个了。呃,分个人详情页面,然后还有购物车页面。然后每一个里边都需要注册这个组件,就直接粘贴了。在这里边分类。
18:00
详情。个人中心以及我们的购物车这几个页面。你看商品分类首页商品分类购物车我的就都有这个,咱们还有一个什么,还有一个商品详情,咱们得说商品跳转的对不对,Det。你看商品详情都有了,那下面没有对应的哪个导航没有转到商品详情页吗。购物车分类都可以了,那不光在这加,那我们页面这块标题,如果我也想改变,因为它这块就相当于一个标题栏嘛,对吧,标题每一个是不我也想让它改变呢,这怎么改变呢?这个呢,我们用导航首位去改变就可以了,那我们在做导航的时候,在这块我们在每一个下变。加一个原元素,每一个下边加一个原元素,也就是Meta这样的一个原元素就可以了。比如说。加个逗号啊,然后Meta加个数据源为元素,这里边我们加个开头的标题,比如说第一个,那就是什么图书兄弟,首页图书兄弟。
19:06
这种页面这个吗?然后我们每一个都加上。在这个位置也是屠夫兄弟。这个位置是商品分类,不是兄弟下边的,比如说商品分类,商品分类,然后这个部分不是兄弟下边的商品详情商品。详情,然后还有。这个购物车。加上这留着肉。购物车,当然你可以把前面这些东西都删掉都可以啊,咱只是标题看怎么设置都行。然后这个是个人中心,个人中心。那这里边原元素加完了之后,那我们导航首位我们就需要加了,你比如说在到某个页面之前的一个导航首位。
20:03
这个地方是咱们的,呃,路由那导航首位,这个是我们创建在这里边页面用的这个路由器对不对,所以我们就直接通过这个rou,具体的你可以查一下这个手串,Before before h就是跳转之前对吧,加这个。跳转之前就加这个,然后这里边儿有一个回调方法,回调方法。呃,是to和from。Took from。然后还可以加一个。但是VIVO2里边的三里边可以不加这个,加上后期咱们因为也会也会用到。加这三个在这里面,那在这里边呢,其他的咱们就不需要了,直接让他怎么的,可以直接next,因为加next就得加这个,让它到下一个得过去对吧。当然这里边儿你可以指定其他的地方,所以咱们如做判断,用户如果没登录的时候,咱们可以在这里边做跳转。
21:01
等咱们做登录的时候再做这个,比如说如果没有登录对吧,在这里。到log给到log音里边去啊next,然后放行之后将那放行,那我这里边可以设置标题document。第2TITLE让它这里边等于to,就是从这个原来的from是从哪来对吧,To是到哪去对吧?在导之前你从这来想到这块去,是不是得显示到的那个地方的这个标题啊,那就是to里边这个路由里边有个Meta,那就是到哪个路由就能找到它的Meta Meta里边有个什么,有个title标题,这样的话我们就。可以了。现在我们在这里边,你看图书兄弟个人中心,如今首页就是图书兄弟分类页面,看这个标题栏对吧,购物车。我的就个人中心这里边就可以去设置了,可以在这个里边通过导航首位的方式,我们去一个一个加,这是全局导航首位,让他每一个在这里边会找这个对不对?你在每个模板里边去写那个局部的导航首位,咱们前面讲导航的时候重点讲过这个导航首位也是很有用的,特别是判断用户登录跳转,统一跳转位置,经常咱们会使用这个方式。
22:14
那如果想详细了解它的话,咱们前面课程一是讲过,另外如果忘记的话,你再去看一下手册,看下导航首位怎么去写好,这就是我们这节课内容,这节课呢,我们主要是做了一个,呃,NAV一个相当于导航,下面是咱们叫导航,这叫做标吧,对吧,也算是导航条,因为我们这会如果加菜单三个杠菜单的时候,我们也可以加这个对吧,或者加一个关闭按钮都可以。好,谢谢大家。
我来说两句