前言

选项卡组件，即实现选项卡切换，常用于存储和显示平面内容。

因为每个选项卡的内容由使用组件的父级控制，也就是说，这部分内容是一个槽。因此，一般的设计方案是在时隙中定义多个div，然后在收到切换消息时显示或隐藏相关的div。这里也写了相关的交互逻辑。我们希望在组件中处理这些交互逻辑，slot只处理业务逻辑。这可以通过重新定义嵌入在选项卡组件中的窗格组件来实现。

1个基本版

由于选项卡组件中的标题是在窗格组件中定义的，因此在初始化或动态更改标题时，选项卡组件需要从窗格组件中获取标题。

html:

！doctype html lang=' en ' head meta charset=' utf-8 ' title tab组件/title link rel='样式表' type=' text/CSS ' href=' index . CSS '/流头dydiv id=' app ' v-斗篷选项卡v-model=' active index '窗格标签=' science and technology '火星疑似发现“外星人墓地”？至今无法解释。/pane pane label=' sports '正在全美沸腾！湖人在四年内以1.2亿的价格迎来了顶级后卫，詹姆斯：如果你有他，你就能赢得总冠军。/pane pane标签=' Entertainment' amirkhan谈中国武术想拍印度版《鹿鼎记》/Pane/tab/div剧本src=' http :https://cdn.bootcss.com/vue/2.2.2/vue.min.js'/剧本src=' http : tass . js '/剧本var app=new Vue({ el: '#app '，data : { active index : } })；/script/body/htmlpane组件：

Vue.component('pane '，{ name: 'pane '，template : ' div class=' pane ' v-show=' isShow ' slot/slot /div '，prop : {//title label : { type : string，default:''}}，data 3: function(){ return {//show或hide isshow: true}}，methods 3: {//通知父组件$ } }，watch: {//当标签值发生变化时，更新title label(){ this . init()；}}，//挂载时，更新title mounted(){ this . init()；}});在窗格组件中，我们进行了以下设计：

Pane组件需要控制选项卡内容的显示和隐藏，所以我们在数据中定义了一个isShow，并使用v-show指令来控制内容的显示或隐藏。当单击对应于此窗格的选项卡标题时，其isShow设置为true。我们需要一个标识符来识别不同的标签标题。在本例中，我们使用窗格组件定义顺序的索引。在道具中定义标签来存储标题。因为标签可以动态更改，所以当窗格被装载以及标签值更改(通过侦听)时，有必要通知父组件并重新初始化标题。因为窗格是一个独立的组件。$parent用于调用父组件选项卡的初始化方法。选项卡组件：

vue.component(' tab '，{ template : ' div class=' tab ' div class=' tab-bar ' ！-tab title- div : class=' tab class(item)' v-for='(item，index)在标题列表中' @ click=' change (index)' {{item。label}} /div /div class=-窗格组件位置- slot/slot /div /div '，prop : { value : { type :[string，number]}}，Data : function(){ return { current index : this。值，标题列表：[]//存储标题}}，Methods: {//设置样式选项卡类：函数(项){返回[' tab-tab '，{//添加所选样式' tab-tab-active ' :(项。name===这个。currentindex)}]}，//获取gettas(){ return this }定义的所有窗格组件。孩子。过滤器(功能(项目){返回项目。$选项。})}，//更新窗格是否显示状态updateisshowstatus(){ vartab=this。gettabs()；变量=这个；//反复判断和设置选项卡是显示还是隐藏。标签。foreach(函数(tab，index) {return tab。就是show=(index==那个。current index)；})}，//初始化init() {/** *初始化title数组*/this . title list=[]；变量=这个；//将此设置为引用this.gettabs()。foreach (function (tab，index){ that . title list . push({ label : tab . label，name 3360 index })；//初始化选项卡索引if(索引===0) {if(！that . CurrentDex){ that . CurrentDex=index；} } });this . updateisshowstatus()；}，//当您单击选项卡标题时，将值更新为相应的索引值change : function(index){ var nav=this。title list[index]；var name=nav.name这个。$emit('input '，name)；} }，watch: {//当值改变时，更新currentindex value:函数(val) {this。currentindex=val}，//当currentIndex值发生变化时，更新窗格是否显示状态current defx : function(){ this。updateisshowstatus()；} }});获取由此定义的所有窗格组件。getTabs()中的$children。GetTabs()用在很多地方，所以这里单独定义。注意：如果方法中有回调函数，需要在外层预先定义一个=this的var，请参考其中的Vue实例本身，或者使用ES2015的箭头函数。在初始化方法中，我们通过迭代窗格组件来初始化标题数组，标签采用定义的标题，名称采用索引。模板定义中使用了头数组。UpdateIsShowStatus()用于更新选项卡是否显示状态。它之所以是独立的，是因为即使监视器currentIndex发生变化，也要调用这个方法。在模板定义中，我们使用v-for指令来渲染标题，并绑定tabClass函数，从而实现动态样式设置。无法使用计算属性，因为需要传递参数。单击每个选项卡标题将触发change()将值更新为相应的索引值。在watch中，我们监听该值，并在该值改变时更新currentIndex。它还监视current defx值，当current defx值更改时，它会更新窗格是否显示。总结如下：

使用组件嵌套方法，使用多个窗格组件作为选项卡组件的插槽。选项卡组件和窗格组件通过父子链($parent和$children)进行通信。风格：

[v-斗篷]{ display : none；}.选项卡{ font-size : 14px；color: # 657180}.{ content : }后的制表符-bar :display:块；宽度： 100%；height: 1px背景# d7dde4margin-top :-1px；}.tab-tab { display : inline-block；padding: 4px 16px右边距： 6px；背景# fffborder: 1px固体# d7dde4cursor:指针；相对位置：}.tab-tab : hover { color : # 336699；字体粗细：更粗；}.制表符-制表符-活动{ color: # 336699border-top: 1px实心# 336699；border-bottom: 1px实心# fff}.{ content : }之前的tab-tab-active :display:块；height: 1px背景# 3399ff绝对位置：top : 0；left : 0；right : 0；}.tab _ content { padd : 8px 0；}.窗格{ margin-top : 26px；font-size : 16px；线高： 24px；color: # 333文本对齐：对齐；}效果：

2关闭属性

我们向窗格组件添加一个可关闭的属性来控制标签是否可以关闭。

在子窗口组件的道具中，添加可关闭属性：

Props: {.//是否可以关闭closeable3360 {Type: Boolean，Default3360 False}}在标签组件的模板中添加一个关闭标签:

.template : ' div class=' tab ' div class=' tab-bar ' ！-tab title- div : class=' tab class(item)' v-for='(item，index)在标题列表中' @ click=' change (index)' {{item。label } } span v-if=' item . closed ' class=' close ' @ click=' close(index，item . name)'/span /div /div class=' tab-content ' ！-窗格组件位置- slot/slot /div /div '，这里，使用v-if指令根据可关闭的值来判断是否构建“close”标签。Click事件绑定到close()函数，传入标记的索引和标记的名称。在选项卡组件的方法中，添加了close()来执行关闭选项卡的逻辑：

Close:函数(index，name){//删除相应的title元素this.titleList.splice(index，1)；var tab=this . gettabs()；变量=这个；//迭代判断并设置被点击的标签页处于隐藏状态标签页。foreach(函数(tab，index){ if(index===name){ return tab。isshow=false}});}首先删除title数组中对应的title元素，因为Vue.js的核心是数据和视图的双向绑定。因此，当我们修改数组时，Vue.js会检测到数组发生了变化，所以用v-for呈现的视图会同步更新。然后，隐藏相应的选项卡内容。我们逐一比较传入的名称和选项卡中的索引。如果确定是我们需要关闭的标签，那么隐藏它的内容。其实这里用key更合适。新样式：关闭{ color: # FF6666} .close:before先于{ content: ' 2716} . close : hover { color : # 990033；字体粗细：更粗；}为需要添加关闭标签的窗格添加可关闭属性：

div id=' app ' v-衣帽间v-model=' active index '窗格标签=' science and technology ' closeable=' true '火星疑似发现“外星人墓地”？至今无法解释。/pane pane label=' sports '正在全美沸腾！湖人4年1.2亿迎来顶级后卫詹姆斯：他能夺冠/窗格标签='娱乐' Closeable='真'阿米尔汗谈中国武术想拍印度版《鹿鼎记》/窗格/制表符/div效果：

3切换动画

当我们切换选项卡时，添加滑动动画，这很简单，只需向活动样式添加变换和过渡样式：制表符-制表符-活动{ color: # 336699border-top: 1px实心# 336699；border-bottom: 1px实心# ffftransform : translatey(-1px)；transition:变换0.5s}效果：

当点击标签标题时，我们以动画的形式上移1个像素。很酷吧？O(_)O~

本文中的示例代码

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。