概述
选项卡切换组件,常用于平级区域大块内容的的收纳和展现。
源码地址:https://github.com/iview/iview/tree/2.0/src/components/tabs
使用:
标签一的内容
标签二的内容
标签三的内容
标签二的内容
在源码的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 通过 扩展tabs选项的附加内容。
2 通过this.$children获取tabs下的每一个TabPane并放进navLIst,遍历navLIst设置tabs选项标签。
3 声明slot接收整个panes。
this.$children查找当前组件的直接子组件,可以遍历全部子组件,需要注意 $children 并不保证顺序,也不是响应式的。
slot 插槽
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。Slot分发的内容,作用域是在父组件上
:
tabindex="0"
ref="navContainer"
@keydown="handleTabKeyNavigation"
@keydown.space.prevent="handleTabKeyboardSelect(false)"
>
{{ item.label }}