Vue3.x项目全程实录 10_设计和开发首页选项卡组件 学习猿地原创

大家好，我是学习园地的特约讲师高洛峰，上节课咱们完成了首页推荐商品的这样的一个设计，那这节课呢，咱们再往下来，按照我们的设计原型图，那么下边有这样的选项卡在首页里边，比如说展示所有的畅销书，新书，还有推荐商品，对吧？那这节课呢，咱只做这个选项卡，那下节课开始呢，咱们再做里边的数据。包括数据咱们在滚动的时候，动态的去加载，先把这样的选项卡咱们先做出来，那这个选项卡我们在做的时候，那它属于什么样的组件呢？它属于通用的组件，因为不光是这个页面里用，你看我们在其他的页面里边，你看这个地方咱们也用到类似于这样的显卡的组件，对吧。好多地方会用到这样的血卡的组件，那概速热评相关突出，这也是名称，只不过不一样，所以呢，我们需要把它做成一个组件，那这个组件呢，嗯。可以做成通用的组件，但是呢，它跟这个关联性是比较强，因为它需要访问上一层的数据，所以呢，我们最好把它做成叫做内容组件，在这块，那这个组件名称我们可以起个名字，比如说叫做呃标签吧，那咱就是呃table标签的一个控制也个选项卡c control c。

呃，用户名你就这个吧。然后在这里边我们新建一个组件，新建一个不是新建一个组件，我们就叫做什么tab举数cont。要这个名称就可以了。然后在这里边我们最外层肯定放一个div，对吧，然后呢，我们会给它去做样式处理，所以呢，我们先声明一个类叫做table coll这样的一个组件就可以了。然后我们这个组件先不写，之前如果我们想用的话，那现在我们是在现在我们就在首页里边用，所以呢，我们找到首页。在这个里面。想用这个组件，因为我们已经创建了这个组件，对不对，那第一件事就需要干嘛，需要引入这个组件。

在这块我们。Import叫做呃，T这个。但是呢，它属于我们放在内容组件里边。那这块有别名，咱先把这加上，然后这个组件用的时候呢，是不是得注册呀，对吧，在这里边我们得需要注册一下，嗯，注册一下咱们叫ta控制就卡。好。然后我们再往上。那直接在这个下边直接用这个组件就可以了，所以呢，我们在下边直接写上这个tab脚写的，然后中间用杠线隔开con toll ctrl，加上这样的组件。就可以了。然后我们现在加上这个组件。那现在是什么也没显示，因为这个组件内容什么，这个组件内容是空的对不对，所以我们需要在这里边详细的去写这个组件，那里边呢，我们需要有几个。看这块需要有，嗯，上面什么样畅销新书和精选这么三个。

所以呢，我们这里边儿需要div。当然了，我们这里边每个选项我们肯定是需要一个类去控制的，所以先把这类标这块，那就是叫做ta controll CTR，对不对？呃，然后it t emm控制。这里边儿需要有三个，那里边儿的那内容，那我们就是用用SPA来做一个。然后我们需要三个先把样式写完啊。两个三个，然后分别是。你看一下这块分别是畅销新书和精选。畅销。然后新书和精选，精选这三个，你看现在内容放在这儿了，但是呢，现在样式不是我们现在想要的，所以呢，我们现在想给他加上我们想要的样式，就需要在这个地方去把样式嗯给写完对不对，那这块局部使用没关系。嗯，加上language l NG。

嗯，S这样的话我们就可以层级的关系就可以用S的方式去写了，比如说table杠控制这个，这里边呢，我们再加上点table控制选项对吧，这里边就可以加这些了，然后呢，在table控制选项里边，那我们还有什么，还有SPA标签对吧，这样的话，这几个层级咱们给写完。然后我们先看一下它的高度，先给它一个高度，呃，高度我们给他，比如说40吧，让它比上面这个呃要稍稍矮一些就行了，让文字居中韩高咱们也给40像素，当然这块现在给是没有用的，对不对？只是这咱们还没有让它，让它横过来对吧，如果横过来，我们用弹性和的布局在这块写上第一次play，第2Y第一次play。布局，然后我们要每个选项，让每个选项这块flag平均占一份。就会冒号。括号平均占一份，你看是不是就把内容横过来了，对吧，然后我们可以将这个的文本，呃格例居中，当然这是通用的了，然后字体，字体呢，咱们可以上面的是12号字体，这原来14号字体吧。

或者是用咱们用通用的通用的字体就可以了啊，然后给个背景颜色，不然你看不出来背景颜色，我们就先随便给个颜色，先随便给个颜色，当然这个颜色咱们后期是呃，不需要的，那我就给一个新的颜色吧。给它跟那个原来有一个区分对吧，不然跟上面那个风格线，它是风格的，你就看不出来了。对吧，加上这个，嗯，给个B颜色，那后期再把它什么变成白色的就可以，然后宽度100%，这个咱们别忘了都加上，然后呢，咱们现在是需要它滚动的时候，嗯，固定到上边的时候，咱们再说现在咱们现在还暂时不需要铺顶，就加这些。加这些呢，然后每一个下边，每一个下边呢，咱们是不是得需要有一个鼠标放上去的时候，有一个活动键，对吧，激活的这样的，那激活的呢，就是在底部，在底部也就是。

呃，来做一个激活的，激活的咱们看在哪里边做比较好啊。比如说当前，呃，这个里边是激活的，或者是。呃，出也就点击哪个哪个就是激活的，对不对，所以点击哪个哪个就是激活的，那我们就需要在这里边div。在这里边来做一个激活的，假如说这个类吧，我们放在这里边，这个是。呃，激活的。假如说放在这里边，那就是后边加上一个这个A。假如说系数是激活的。然后他在跟这个是同级的，那我们需要写在这个位置，需要写在这个位置，对不对，把这个。默认的样式也写出来，比如说A。

前面是。默认是激活的，然后我们让它字体的，呃，激活的字体的颜色，咱们用上文本激活的那个颜色，就是在全局里边，就是听清个吧，游记的那个高亮的那个，然后呢，让他这里边的。这是这个SPA，然后这块我们再加上，再加这个里边的SPA，我们加上一个，呃。加一个border的底，Border Bo DR border底部，BOT Tom底部，比如说咱们来一个杠线，这的底边框是三个像素的，然后呃，实现的颜色呢，跟我们字体当前字体颜色是一样的。加上这个这样的话，我们看一下当前如果激活了，你看就变成这样了，对不对，但是位置对吧，那我看那我们让每一个下边都有的位置可以在这块写了他。五个像素，那四周都是五个像素，你要五个像素，它两边稍稍超一个对不对，当然五个像素才六个像素，你可以自己去调整，对吧，如果你觉得五个像素比较少的话，你就可以六个像素。

对吧，稍稍变化一下，这个没关系，你可以根据你的实际情况去调整这个。那现在可以加这个了，加这个的话，那我们背景颜色什么也有了，这个背景颜色就不需要了，我们把它变成白色的吧，跟我们。嗯，如果这里边如果颜色比较杂的话，会不太好看，对吧，现在变成这样，但是我想鼠标点击的时候切换对吧，现在点击的时候还做不到切换，咱们现在只是固定写的，那我们就需要在这段写了，另外呢，这些地方。名字，如果你固定写了这个组件，是不是都是固定这个名包，两种方法，要么用插槽，用插槽呢，还不好做，在一点上呢，如果有四个选项卡呢，或者两个选项卡呢，也不太好办，所以最好的办法，那这里边内容根据变化，那我们用属性的方式，也就是我们在用的地方，我们通过属性把这个标题存进来，那在哪用呢？在后面这用对不对，所以呢，我们在这个地方。在这块我们传一个标题，传一个数组，就不在里边直接声明了，直接在这写就可以啊，因为比较小的一个数组对吧，也不用他想的是用的时候传递就行了，那比如说这里边写着畅销。

然后这里边写上，呃，新书和我们的是精选，如果在二级页面用这个，那我们就存内容，不同的内容就可以了，顺序让它保持一致，那既然这边我们存标题可以加个复数啊，因为是多个标题，是一个术语嘛，命名的时候进行规范一些。那在这边我们是不是就得接收这个接收这个属性啊，对吧，你只有接收了你才能够在页面上去便利pro，呃，属性pros接收这个属性，属性第一个我们是呃接收的是这个标题，然后呢，类型是类型是ay数组的，然后D缺少值fairt。Det确诊了。如果是数组的话，和对象的话，尽量使用方法的方式，并直接这么给值，使用这种方式，因为我们date是一样，直接返回一个空数组。

那这样的话，我们就可以接受这些属性值了，接受这些属性值，我们这块就可以把这些东西去掉了，我们就可以直接在这个位置。我们可以干嘛，我们可以去遍历，因为它是一个数组嘛，V告for遍历，可以遍历IM，当然我把它这里边肯定也会用到什么所引的顺序啊，把这个也直接辨列出来，在哪块呢？咱们传过来是title标题。对吧，标题有几个，咱们便利几个标题，当然了，有便利的话，咱们一定要把这写上，把这个KK我们就用in代吧，一定要把这个加上啊，不然的话用那个e me去处理的时候肯定就会出问题了。然后加上这个，这个时候呢，我们就得在这个内容里边，我们放的就是什么ITM数组的里边的内容了，对吧，数组里内容了，这样的话我们再刷新一下，你看还是畅销基数精选是没问题的，那这个时候我们就可以点击的时候让它去变化，点击的时候变化呢，那我们就可以设置。

因为有这个当前的这个对不对。对吧，你点击哪个这个index是不是就在某一个里边是哪个对不对，所以在这里边我们需要。呃，在啊。做一个setup setup做一个这样的一个方法，在这里边我们声明一个当前的属性，那既然我们写setup想用到ref之类的ref是不是就得把ref引入啊，但是你需要其他的，你再引入其他的from VE把ref引入，所以这里边我们let声明一个变量叫做CRT当前的index的，所以对吧，等于ref默认给它值是零，然后re return返回这个CRT当前的这个。这怎么有个红色的。来没有问题啊，因为一个红色它就是出错的这个原因对吧。这样的话，我们在点击的时候，那这个位置我们是不是就得加一个点击的一个事件呢。

对吧，一点击的时候，我们把当前的这个属性给拿回来，所以这块我们需要在点击文字吧，那我们就在文字的。那别带文字了，还是直接在这个div吧，点击整个div端的有效，如果太长的话，你可以把它怎么的挑选啊。这个问题，然后在这块。加上一个CC点击事件，当我们点击的时候，我们让他。调用一个方法，我们叫做it DM，嗯，Click选项被点击了，那我把这个index传进来，这样的话我们做一个这样的一个方法。点击哪个，我们就把当前的这个音设成哪个方法。证明一个点击的方法，这里边存一个index。用一个进程方法去做。啊。这样的话，我们点击的时候，我们要CRT，别忘了使用if声明给video度值valu v video度值对吧？用video度等于当前的index，这样的话我们选择哪个就是当前的index就会变成哪个。

对吧？然后我们在这里边就可以判断了，我们这里边原来不有这个类吗？那我们后边还可以加一个类冒号class，让类哪个属性呢？让这个类里边有一个激活的属性，也就是A，当它属性是真的时候，是不是就显示，如果这么写，那每个属性都是真是不是都显示对吧？什么时候显示，也就是我们在这里边让当前的这个index的，也就是循环的index的，等于我们点击的当前的这个index c RTX。现在我们点击了。有错误。嗯。Item，它不是一个方法。我们没把对方法返回吗？没有返回这块it it。又卡机了诶。测试一下。啊，现在是没有错误对吧，点击新书点击精选啊，这是没问题的对吧。

那我们加上这个选项卡之后，我们在点击的时候是不是内容怎样，下边内容变呢？我们只是现在要这个选项卡是可以切换的，但是下边内容还没有切换。那我们只要知道点击的是哪个索引，那下边数据变成显应式的，用计算属性之类的，是不是就可以让下边数据变化，所以呢，我们想要这个外层，也就使用标签的值时候，知道我下边的数据在变化，有下边这块我们会放一些数据。DT，或者是随便写一个呃，数据吧，DTS。所以ID吧，做的是呃，临时的TPID临时的ID，但是现在这个变量还没声明，只要我点击的时候，我能让它变化，外里层点击让它变化就可以了，现在你看我们这个组件，这个页面怎么能用这个变量去变化，对吧。咱们说了，我们是不是得把组件子组件的数据传到副组件，那正好是点击的时候需要把点击索引传给副组件，所以呢，我们就需要在那个setup里边。

调用我们的EMIT将这个这里边将我们的世界往外传，那在setup里边有两个属性，一个是什么props，这个属性接收属性的，对不对？如果我们不在页面上使用属性，在这里边用到接收的属性，比如说title头，那我们在这里边就能获取这个title头，那我现在在这块获取title头没什么必要性，对不对？但是这参数得留着，因为我们得用第二个参数，第二参数是上下文求文，Test是上下文。对吧，那或许上下文，上下文里边有很多个属性可以用，其中有一个就是什么EMITEM，咱们子组件向父比较传递的时候，咱们经常说说过这样的事情，就不重复去说了，所有EMIT这样的方法，所以呢，我们在点击的时候就可以通过EMIT。这个方法我们去干嘛呀？我们去调用副组件中的事件，调用副组件中自定义的一个识点，比如说调用一个table click，点击C点击的方法，然后呢，把一传进来。

这样的话，我们在负组件里边需不需要制定一个这样的事件，然后接受这个方法，也就是我们在负组件这个里边，对吧？在这个方法里边我们就得加上子组件传给我们的什么，传给我们的这个事件，这个事件名叫做自定义的，就是table delete，因为我们那会要求的叫定，对不对，然后这里边要用。自己里边的table。这是自定义事件，调用的是自己方法里这个这个东西对吧？这个方法名table click click，所以我在这块就得需要创建一个什么cost table click方法等于。这个方法等于呢，需要传递一个参数index，也就是我们在子组件里边调用这个事件，并把参数传给它，也就相当于它会找到什么，找到这个属性，找到这个事件，对吧？触发这个事件，将这处罚事件调用这个方法，那把in代是不是传给谁了？传给了这个方法，这个方法我们处理一下，那我们就可以把这个属性。

做我们自己的一个处理，你想让他触发的时候，想打印什么或者看什么都是可以的，对不对，那在这里边比如说。呃，设置一个选择的类型，那我们生一个。随便声明一个变量吧。指标随便升，有if啊。临时的。嗯，临时。零时变量，这里边说明一个L，呃叫做咱们叫上面是t e midd临时变量等于ref，零。上面一个临时变量。只要你看到这个变化，然后我们这会把这个临时变量。又爬出了d midd。拿过去。T mid啊问题。七啊，在这写又写错位置，在这个位置临时的。这咱就临时写一下，然后在这块原工人这块零对吧，然后t midd，因为它是用if声明的，为有等于我们子点击选卡的时候传过来的。

应该。现在默认使用点击新书。没有变化，看一下这里边儿哪有错误。呃，数据上边这块没有定义，也就是这个方法，我们没有返回tad。正好我们现在点击新书一畅销数零精选二，你看就可以把这个发过来了，那我们拿到这个数据，我们就可以从数据库里边按照类型对吧，去获取数据了，按照类型去获取数据了，那如果这里边的数据很长。数据很强啊，你看。嗯。随便加下。干嘛要加这么多数据？啊，那这块是不是就可以拖动这个滚动条啊，对吧，拖动滚动条的时候，我们想让它在这块固定。

对吧，选择的时候变化固定住怎么办呢。这个选卡，那我们就需要在这里边通过加载的样式，当然我们可以用GS的代码去写，那在这里边呢，我们也可以有一个CS3给我们提供了一个比较有用的一个方法。在这里。也就是它的最外层水卡在这块。在这块我们加上一个什么呢？加上一个，嗯，通过这个位置有一个属性叫ST，这个是我新加的一个固定。那我们这里边儿。让它套上边是45，那就顶部就是四十四四十五吧，四十四四十五都行。让他放在这个位置，你们刷新一下。你看现在我们滚动的时候，你看它就悬停在这块，你看往下滚动的时候，在这块放到这块就悬停这块，这个是CS3给我们新加的一个属性，不是所有浏览器都支持，但是很有效，当然我们做的是移动端，移动端浏览器基本上都支持，所以用这个就很快解决，你不用说判断高度啊，宽度啊，然后我们去处理，对吧？使用这个是很好的解决，它可以固定了，你看上交书新书精选。

就可以解决这个问题了，当然后期我们加上动态加载数据，它还会失效，那咱们再用其他的方法去写。这就是选项卡，下节课呢，我们就需要从选项卡里边获取我们想要的数据，好，谢谢大家，这节课我们就讲到这。