iviewUI-Tabs选项卡切换组件

概述 

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

源码地址：https://github.com/iview/iview/tree/2.0/src/components/tabs

使用： 

<template>

   <Tabs name="first">

       <TabPane label="macOS" icon="logo-apple"tab="first">

           <Tabs name="second" >

                <TabPanelabel="macOS" icon="logo-apple" tab="second">标签一的内容</TabPane>

                <TabPanelabel="Windows" icon="logo-windows"tab="second">标签二的内容</TabPane>

                <TabPanelabel="Linux" icon="logo-tux" tab="second">标签三的内容</TabPane>

           </Tabs>

       </TabPane>

       <TabPane label="Windows" icon="logo-windows"tab="first">标签二的内容</TabPane>

   </Tabs>

</template>

在源码的tabs文件下有三个文件：index.js,tabs.vue,pane.vue

 

index.js中引入了tabs.vue和pane.vue.

 

import Tabs from './tabs.vue';

import Pane from './pane.vue';

 

Tabs.Pane = Pane;

export default Tabs;

tabs.vue

tabs.vue是整个组件的容器，分为三部分：

 

1 通过<slotname="extra"></slot> 扩展tabs选项的附加内容。

 

2 通过this.$children获取tabs下的每一个TabPane并放进navLIst，遍历navLIst设置tabs选项标签。

 

3 声明slot接收整个panes。

 

this.$children查找当前组件的直接子组件，可以遍历全部子组件，需要注意 $children 并不保证顺序，也不是响应式的。

slot 插槽

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。Slot分发的内容，作用域是在父组件上

<template>

   <div :class="classes">

       <div :class="[prefixCls + '-bar']">

           <div :class="[prefixCls + '-nav-right']"v-if="showSlot"><slotname="extra"></slot></div>

           <div

                :class="[prefixCls +'-nav-container']"

                tabindex="0"

                ref="navContainer"

               @keydown="handleTabKeyNavigation"

                @keydown.space.prevent="handleTabKeyboardSelect(false)"

           >

                <div ref="