element-ui tabs 组件源码分享

tabs 标签页组件源码简单分享，主要从以下几个方面：

1、tabs 组件页面结构。

2、tabs 组件属性。

3、tabs 组件事件。

4、tab-pane 组件属性。

一、组件页面结构。

二、组件属性。

2.1 value/v-model 绑定值，选中选项卡的 name，类型 string，默认值 第一个选项卡的name。

2.2 type 风格类型，类型 string，可选值 card/border-card，无默认值。

2.3 closable 标签是否可关闭，类型 boolean，默认值 false。

2.4 addable 标签是否可增加，类型 boolean，默认值 false。

2.5 editable 标签是否同时可增加和关闭，类型 boolean，默认值 false。

2.6 tab-position 选项卡所在位置，类型 string，可选值 top/right/bottom/left，默认 top。

2.7 stretch 标签的宽度是否自撑开，类型 boolean，默认 false。

2.8 before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。类型 Function(activeName, oldActiveName)，无默认值。

三、组件事件。

3.1 tab-click tab 被选中时触发，回调参数‘被选中的标签 tab 实例’。

3.2 tab-remove 点击 tab 移除按钮后触发，回调参数‘被删除的标签的 name’。

3.3 tab-add 点击 tabs 的新增按钮后触发，无回调参数。

3.4 edit 点击 tabs 的新增按钮或 tab 被关闭后触发，回调参数‘(targetName,action)’。

四、tab-pane 组件属性。

4.1 label 选项卡标题，类型 string，无默认值。

4.2 disabled 是否禁用，类型 boolean，默认 false。

4.3 name 与选项卡绑定值 value 对应的标识符，表示选项卡别名，类型 string，默认‘该选项卡在选项卡列表中的顺序值，如第一个选项卡则为“1”’。

4.4 closable 标签是否可关闭，类型 boolean，默认 false。

4.5 lazy 标签是否延迟渲染，类型 boolean，默认 false。