tabs iviewUI-Tabs选项卡切换组件

总结

制表符切换组件，通常用于在水平区域存储和显示大块内容。

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

使用:

& lt模板>。

& ltTabs name = " first " & gt。

& lttab pane label = " MacOS " icon = " logo-apple " tab = " first " >

& ltTabs name = " second " >

& lttab panel Abel = " MacOS " icon = " logo-apple " tab = " second " >标签1的内容

& lt标签面板标签= "窗口"图标= "徽标-窗口"标签= "第二个" >;标签2的内容

& lttab panel Abel = " Linux " icon = " logo-tux " tab = " second " >标签3的内容

& lt/tab >

& lt/TabPane>。

& lttab pane label = " Windows " icon = " logo-Windows " tab = " first " >；标签2的内容

& lt/tab >

& lt/template>。

源代码的tab文件下有三个文件:index.js，tabs.vue，pane.vue。

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

从“”导入选项卡。/tab . vue '；

从“”导入窗格。/pane . vue '；

标签。窗格=窗格；

导出默认选项卡；

tabs.vue

Tabs.vue是整个组件的容器，分为三个部分:

1通过

2通过这个获得标签下的每个标签面板。$children，将其放入导航列表，并遍历导航列表来设置选项卡选项标签。

3声明slot接收整个窗格。

这个。$children可以搜索当前组件的直接子组件，并遍历所有子组件。需要注意的是$children不保证订单，不响应。

插槽插槽

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围中编译。插槽分发的内容的范围在父组件上

& lt模板>。

& ltdiv:class = " class " >

& ltdiv:class = "[prefixCls+'-bar ']" & gt；

& ltdiv:class = "[prefixCls+'-nav-right ']" v-if = " show slot " & gt；& ltslotname="extra ">。& lt/slot>。& lt/div>。

& lt差异

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

tabindex="0 "

ref="navContainer "

@ keydown = " handleTabKeyNavigation "

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

>。

& ltdiv ref = " navWrap ":class = "[prefixCls+'-navWrap '，可滚动？prefixCls+'-nav-scroll ':']" & gt；

& ltspan:class = "[prefixCls+'-nav-prev '，可滚动？':prefixCls+'-nav-scroll-disabled ']" @ click = " scroll prev " & gt；& ltIcontype="ios-arrow-back " >& lt/Icon >& lt/span>。

& ltspan:class = "[prefixCls+'-nav-next '，可滚动？':prefixCls+'-nav-scroll-disabled ']" @ click = " scrollenext " & gt；& lticon type = " IOs-arrow-forward " & gt。& lt/Icon >& lt/span>。

& ltdiv ref = " nav scroll ":class = "[prefixCls+'-nav-scroll ']" & gt；

& ltdiv ref = " nav ":class = "[prefixCls+'-nav ']":style = " nav style " & gt。

& ltdi :style="barStyle " >& lt/div>。

& ltdi v-for= "(项，索引)在navList"@click="handleChange(索引)" >中；

& ltIconv-if="item.icon！== ''" :type="item.icon">。& lt/Icon >

& ltrender v-if = " item . label TYPe = = ' function ' ":render = " item . label " & gt。& lt/Render >

& lttemplatev-else>。{ { item.label } } & lt/template>。

& lticon:class = "[prefixCls+'-close ']" v-if = " show close(item)":type = " arrowType ":custom = "习惯行类型":size = " arrowSiZe " @ click . native . stop = " handle remove(index)" & gt；& lt/Icon >

& lt/div>。

& lt/div>。

& lt/div>。

& lt/div>。

& lt/div>。

& lt/div>。

& ltdiv:CLaSS = " ContentCLaSS ":style = " ContentSTYLe " ref = " panes " >& lt插槽>。& lt/slot>。& lt/div>。

& lt/div>。

& lt/template>。

pane.vue

pane文件的主要功能是接收来自父组件的传入名称、标签、图标、禁用、可关闭、标签、索引参数和注入:[' TabsinInstance ']，从而获取父组件的这个引用，以便在参数销毁时调用父组件的updateNav更新每个标签。

提供/注入

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

1.父子组件，通过prop

2.非父子组件，通过vuex或根vue加载器

这通常是以上两种情况，但是还有一种特殊情况，就是孙子组件或者更深层次的组件通信

为什么不用vuex，省事？？？？

为此引入了很多vuex，这将导致代码的低性价比。没有必要在项目本身中使用vuex

1.provide相当于增强的父组件prop

2.inject相当于增强子组件的道具

劣势

这样做有明显的弊端。很难跟踪数据，因为它可以在任何级别访问。因此，通常不建议使用该属性。Vuex可以和vuex一起使用，但是在开发构件库的时候，并不依赖于vuex，在不知道用户使用环境的情况下也可以很好的使用

& lt模板>。

& ltdiv:class = " prefixCls " v-show = " show ":style = " Content STYLe " >& lt插槽>。& lt/slot>。& lt/div>。

& lt/template>。

& lt>。

const prefixCls = ' ivu-tab-tab pane '；

导出默认值{

名称:“TabPane”，

注入:[' TabsinInstance ']，

道具:{

名称:{

类型:字符串

},

标签:{

类型:[字符串，函数]，

默认值:“”

},

图标:{

类型:字符串

},

禁用:{

类型:布尔值，

默认值:false

},

可关闭:{

类型:布尔值，

默认值:null

},

//当制表符嵌套时，使用制表符来区分层次结构，并指向相应制表符的名称

标签:{

类型:字符串

},

//当TabPane使用v-if时，不会提前渲染。此时，可以设置索引并从小到大排序

//该值必须大于0

索引:{

类型:数字

}

},

数据{

返回{

前缀前缀:前缀前缀，

show: true，

当前名称:this.name

};

},

计算:{

contentStyle {

返回{

能见度:这个。TabsInstance.activeKey！== this.currentName？隐藏':'可见'

};

}

},

方法:{

updateNav {

这个。tab sininstance . updateNav；

}

},

手表:{

名称(val) {

this.currentName = val

this.updateNav

},

标签{

this.updateNav

},

图标{

this.updateNav

},

禁用{

this.updateNav

}

},

已安装{

this.updateNav

},

已销毁{

this.updateNav

}

};

& lt/>。