iviewUI-Tabs选项卡切换组件

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=”navWrap”:class=”[prefixCls + ‘-nav-wrap’, scrollable ? prefixCls +’-nav-scrollable’ : ”]”>

<span:class=”[prefixCls + ‘-nav-prev’, scrollable ? ” : prefixCls +’-nav-scroll-disabled’]” @click=”scrollPrev”><Icontype=”ios-arrow-back”></Icon></span>

<span:class=”[prefixCls + ‘-nav-next’, scrollable ? ” : prefixCls +’-nav-scroll-disabled’]” @click=”scrollNext”><Icontype=”ios-arrow-forward”></Icon></span>

<divref=”navScroll” :class=”[prefixCls + ‘-nav-scroll’]”>

<divref=”nav” :class=”[prefixCls + ‘-nav’]”:style=”navStyle”>

<di :style=”barStyle”></div>

<di v-for=”(item, index) in navList”@click=”handleChange(index)”>

<Iconv-if=”item.icon !== ”” :type=”item.icon”></Icon>

<Renderv-if=”item.labelType === ‘function'”:render=”item.label”></Render>

<templatev-else>{{ item.label }}</template>

<Icon:class=”[prefixCls + ‘-close’]” v-if=”showClose(item)”:type=”arrowType” :custom=”customArrowType”:size=”arrowSize”@click.native.stop=”handleRemove(index)”></Icon>

</div>

</div>

</div>

</div>

</div>

</div>

<div :class=”contentClasses”:style=”contentStyle”ref=”panes”><slot></slot></div>

</div>

</template>

pane.vue

pane窗格文件主要作用是,接收传进来name,label,icon,disabled,closable,tab,index参数,和父组件传进来的注入inject:[‘TabsInstance’],以获取父组件的this引用.以便在参数及销毁时调用父组件的updateNav更新每一个tab.

provide/inject

在vue中不同组件通信方式如下:

1.父子组件,通过prop

2.非父子组件,通过vuex或根vue转载器

通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信

为什么不用vuex,简单省事????

有很多为了这个引入vuex会导致代码性价比比较低,项目本身没有使用vuex的必要

1.provide就相当于加强版父组件prop

2.inject就相当于加强版子组件的props

缺点

这么做也是有明显的缺点的,在任意层级都能访问导致数据追踪比较困难,因此这个属性通常并不建议使用。能用vuex的使用vuex,但是在做组件库开发时,不对vuex进行依赖,且不知道用户使用环境的情况下可以很好的使用

<template>

<div :class=”prefixCls” v-show=”show”:style=”contentStyle”><slot></slot></div>

</template>

<script>

const prefixCls = ‘ivu-tabs-tabpane’;

export default {

name: ‘TabPane’,

inject: [‘TabsInstance’],

props: {

name: {

type: String

},

label: {

type: [String, Function],

default: ”

},

icon: {

type: String

},

disabled: {

type: Boolean,

default: false

},

closable: {

type: Boolean,

default: null

},

// Tabs 嵌套时,用 tab 区分层级,指向对应的 Tabs 的 name

tab: {

type: String

},

// 在 TabPane 使用 v-if 时,并不会按照预先的顺序渲染,这时可设置 index,并从小到大排序

// 数值需大于 0

index: {

type: Number

}

},

data () {

return {

prefixCls: prefixCls,

show: true,

currentName: this.name

};

},

computed: {

contentStyle () {

return {

visibility:this.TabsInstance.activeKey !== this.currentName ? ‘hidden’ : ‘visible’

};

}

},

methods: {

updateNav () {

this.TabsInstance.updateNav();

}

},

watch: {

name (val) {

this.currentName = val;

this.updateNav();

},

label () {

this.updateNav();

},

icon () {

this.updateNav();

},

disabled () {

this.updateNav();

}

},

mounted () {

this.updateNav();

},

destroyed () {

this.updateNav();

}

};

</script>