1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue tab切换_iviewUITabs选项卡切换组件

vue tab切换_iviewUITabs选项卡切换组件

时间:2022-04-09 14:58:33

相关推荐

vue tab切换_iviewUITabs选项卡切换组件

概述

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

源码地址:/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 }}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。