标签页
提供平级的区域将大块内容进行收纳和展现，保持界面整洁
何时使用
- 将平级的内容进行收纳和切换展示
功能演示
常规操作
- 添加标签页：选中标签页组件，在右侧配置栏点击添加标签页
- 标签页内容：每个标签页都有自己的插槽，点击标签名称即可切换到该标签页，
- 删除标签页：选中标签，在右侧配置栏进行前后移动、删除操作
- 其他配置：标签页组件的配置是非常直观的，整个标签页组件以及每个标签页都有对应的配置，选中即可修改。
动态标签页
动态标签页可以自由增删标签，每个标签的内容都是由JS生成的。因此搭建功能时必须事先规划好这些动态标签的内容与标签的key或者index有什么关系，然后用一个内容区来渲染当前激活Tab的内容。
假设有这样一个需求：
- 添加一个用户数据标签页，支持动态增删标签，每个标签代表一个用户。
- 标签内容：用户序号、用户姓名输入框。数据结构：
{index, name} - 标签页底部添加一个新增用户按钮，点击时新增一个标签页
- 标签页底部添加一个提交按钮，点击时收集所有数据并在控制台输出
添加动态标签页
有三步：添加标签页组件、打开「动态标签页」开关、打开「隐藏插槽占位」开关、添加自定义内容区。
因为标签页插槽只负责当前标签页的内容，无法满足动态标签页的需求，所以我们要自定义内容区。
标签数据维护
我们需要变量tabData来存储标签数据：{id, key, name, closable, user: {id, name}}，还需要变量currentTab来记录当前激活的标签key。
特别注意：设置标签页数据需要的id和key是字符串，如果类型不对，会导致标签页自动激活失效
用户打开页面时，最好能显示一个默认的Tab，因此我们在打开页面时创建默认数据并更新tabData：
标签选择函数
此时显示了默认的Tab数据，我们还需要将该项设置为激活Tab，并显示对应的用户数据。这个逻辑在切换Tab时也需要用，因此我们做一个通用函数Fx：负责激活Tab项、设置用户序号、设置用户姓名、给出错误提示
现在需要在打开页面时调用这个Fx，新增标签、切换标签时也都需要调用它：
点击Tab时调用Fx：
新增标签
一个标签就是一个用户，因此我们在新增用户按钮上添加事件，点击时创建新的标签数据，并更新tabData、激活最新Tab：
记录用户数据
文本框输入时，更新当前tab项的user.name：根据currentTab找到对应的Tab数据，将输入的值保存到user.name上
提交数据
用户数据都在tabDdata里，提交时只要遍历该数组即可。
完整配置
标签页
整个标签页组件的配置项。
| 属性名称 | 说明 |
|---|---|
| 插槽布局 | 也就是标签页内容的布局方式设置，详见《内容布局》 |
| 添加标签页 | 添加新的标签页 |
| 外观 | 配置标签的外观，包括卡片和简约（默认）类型 |
| 尺寸 | 标签大小, 默认是中(middle) |
| 标签位置 | 标签位置, 默认是上部(top) |
| 标签居中 | 标签是否居中显示，这在标签页较少时使用，左右留白多，效果更明显 |
| 禁止点击切换 | 开启后，禁止点击切换标签页 |
| 隐藏时是否渲染内容 | 标签页被隐藏时是否渲染 DOM 结构 |
| 动态设置显示tab | 开启后，可以通过逻辑连线连接标签页的输入项【设置显示tab】设置显示（激活）的标签页 |
| 隐藏插槽占位 | 是否隐藏插槽占位 |
| 动态标签页 | 开启后，可以通过逻辑连线连接标签页的输入项【设置标签页数据】动态设置标签页 |
| 不展示「更多」按钮 | 开启后，当标签项较多时，支持滚动，但不展示「更多」按钮 |
| 额外内容-左侧 | 开启后，左侧新增【左侧内容】插槽 |
| 额外内容-右侧 | 开启后，右侧新增【右侧内容】插槽 |
| 标签页点击 | 点击标签页时触发【标签页点击】输出项事件 |
标签
整个标签页组件的配置项。
| 属性名称 | 说明 |
|---|---|
| 名称 | 标签默认名称 |
| 显示icon | 是否显示图标（icon） |
| 文字提示 | 鼠标悬浮在标签上时显示的文字内容，可不填 |
| 前移 | 将该标签向前移动一个位置 |
| 后移 | 将该标签向后移动一个位置 |
| 删除 | 删除该标签 |
| 事件：显示 | 标签页的显示事件 |
| 事件：隐藏 | 标签页的隐藏事件 |