Tabs 选项卡

选项卡容器组件。

基本用法

```schema: scope=”body” { “type”: “tabs”, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1” }, { “title”: “Tab 2”, “tab”: “Content 2” } ] }

  2. 默认想要显示多少选项卡配置多少个 `tabs` 成员即可。但是有时候你可能会想根据某个数据来动态生成。这个时候需要额外配置 `source` 属性如。
  4. ```schema
  5. {
  6.     "type": "page",
  7.     "data": {
  8.         "arr": [
  9.             {
  10.                 "a": "收入",
  11.                 "b": 199
  12.             },
  14.             {
  15.                 "a": "支出",
  16.                 "b": 299
  17.             }
  18.         ]
  19.     },
  21.     "body": [
  22.         {
  23.             "type": "tabs",
  24.             "source": "${arr}",
  25.             "tabs": [
  26.                 {
  27.                     "title": "${a}",
  28.                     "body": {
  29.                         "type": "tpl",
  30.                         "tpl": "金额：${b|number}元"
  31.                     }
  32.                 }
  33.             ]
  34.         }
  35.     ]
  36. }

拖拽排序

```schema: scope=”body” { “type”: “tabs”, “draggable”: true, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1” }, { “title”: “Tab 2”, “tab”: “Content 2” }, { “title”: “Tab 3”, “tab”: “Content 3” } ] }

  2. ## 可增加、删除
  4. `tab` 设置的 `closable` 优先级高于整体。使用 `addBtnText` 设置新增按钮文案
  6. ```schema: scope="body"
  7. {
  8.     "type": "tabs",
  9.     "closable": true,
  10.     "addable": true,
  11.     "addBtnText": "新增Tab",
  12.     "tabs": [
  13.         {
  14.             "title": "Tab 1",
  15.             "tab": "Content 1",
  16.             "closable": false
  17.         },
  18.         {
  19.             "title": "Tab 2",
  20.             "tab": "Content 2"
  21.         }
  22.     ]
  23. }

可编辑标签名

双击标签名，可开启编辑

```schema: scope=”body” { “type”: “tabs”, “editable”: true, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1”, }, { “title”: “Tab 2”, “tab”: “Content 2” }, { “title”: “双击编辑”, “tab”: “Content 2” } ] }

  2. ## 可禁用
  4. ```schema: scope="body"
  5. {
  6.     "type": "tabs",
  7.     "tabs": [
  8.         {
  9.             "title": "Tab 1",
  10.             "tab": "Content 1"
  11.         },
  12.         {
  13.             "title": "Tab 2",
  14.             "tab": "Content 2",
  15.             "disabled": true
  16.         }
  17.     ]
  18. }

显示提示

```schema: scope=”body” { “type”: “tabs”, “showTip”: true, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1” }, { “title”: “Tab 2”, “tab”: “Content 2” } ] }

  2. ## 展示模式
  4. ### 简约
  6. ```schema: scope="body"
  7. {
  8.     "type": "tabs",
  9.     "tabsMode": "simple",
  10.     "tabs": [
  11.         {
  12.             "title": "简约(10)",
  13.             "body": "选项卡内容1",
  14.             "icon": "fa fa-home"
  15.         },
  16.         {
  17.             "title": "选项卡2",
  18.             "body": "选项卡内容2"
  19.         },
  20.         {
  21.             "title": "选项卡3",
  22.             "body": "选项卡内容3"
  23.         }
  24.     ]
  25. }

加强

```schema: scope=”body” { “type”: “tabs”, “tabsMode”: “strong”, “tabs”: [ { “title”: “选项卡1”, “body”: “选项卡内容1” }, { “title”: “选项卡2”, “body”: “选项卡内容2” }, { “title”: “选项卡3”, “body”: “选项卡内容3” } ] }

  2. ### 线型
  4. ```schema: scope="body"
  5. {
  6.     "type": "tabs",
  7.     "tabsMode": "line",
  8.     "tabs": [
  9.         {
  10.             "title": "选项卡1",
  11.             "body": "选项卡内容1"
  12.         },
  13.         {
  14.             "title": "选项卡2",
  15.             "body": "选项卡内容2"
  16.         },
  17.         {
  18.             "title": "选项卡3",
  19.             "body": "选项卡内容3"
  20.         }
  21.     ]
  22. }

卡片

```schema: scope=”body” { “type”: “tabs”, “tabsMode”: “card”, “tabs”: [ { “title”: “选项卡1”, “body”: “选项卡内容1” }, { “title”: “选项卡2”, “body”: “选项卡内容2” }, { “title”: “选项卡3”, “body”: “选项卡内容3” } ] }

  2. ### 仿 Chrome
  4. 仿 Chrome tab 样式
  6. ```schema: scope="body"
  7. {
  8.     "type": "tabs",
  9.     "tabsMode": "chrome",
  10.     "tabs": [
  11.         {
  12.             "title": "选项卡1",
  13.             "body": "选项卡内容1"
  14.         },
  15.         {
  16.             "title": "选项卡2",
  17.             "body": "选项卡内容2"
  18.         },
  19.         {
  20.             "title": "选项卡3",
  21.             "body": "选项卡内容3"
  22.         }
  23.     ]
  24. }

水平铺满

```schema: scope=”body” { “type”: “tabs”, “tabsMode”: “tiled”, “tabs”: [ { “title”: “选项卡1”, “body”: “选项卡内容1” }, { “title”: “选项卡2”, “body”: “选项卡内容2” }, { “title”: “选项卡3”, “body”: “选项卡内容3” }, { “title”: “选项卡4”, “body”: “选项卡内容4” } ] }

  2. ### 选择器型
  4. ```schema: scope="body"
  5. {
  6.     "type": "tabs",
  7.     "tabsMode": "radio",
  8.     "tabs": [
  9.         {
  10.             "title": "选项卡1",
  11.             "body": "选项卡内容1"
  12.         },
  13.         {
  14.             "title": "选项卡2",
  15.             "body": "选项卡内容2"
  16.         },
  17.         {
  18.             "title": "选项卡3",
  19.             "body": "选项卡内容3"
  20.         }
  21.     ]
  22. }

垂直

```schema: scope=”body” { “type”: “tabs”, “tabsMode”: “vertical”, “tabs”: [ { “title”: “选项卡1”, “body”: “选项卡内容1” }, { “title”: “选项卡2”, “body”: “选项卡内容2” }, { “title”: “选项卡3”, “body”: “选项卡内容3” } ] }

  2. ### 侧边栏模式
  4. 使用 `sidePosition` 设置标签栏位置。
  6. ```schema: scope="body"
  7. {
  8.     "type": "tabs",
  9.     "tabsMode": "sidebar",
  10.     "sidePosition": "right",
  11.     "tabs": [
  12.         {
  13.             "title": "按钮",
  14.             "body": "选项卡内容1",
  15.             "icon": "fa fa-square"
  16.         },
  17.         {
  18.             "title": "动作",
  19.             "body": "选项卡内容2",
  20.             "icon": "fa fa-gavel"
  21.         }
  22.     ]
  23. }

配置顶部工具栏

配置toolbar实现顶部工具栏。

```schema: scope=”body” { “type”: “tabs”, “toolbar”: [ { “type”: “button”, “label”: “按钮”, “size”: “sm”, “actionType”: “dialog”, “dialog”: { “title”: “弹窗标题”, “body”: “你点击了” } } ], “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1” }, { “title”: “Tab 2”, “tab”: “Content 2” } ] }

  2. ## 配置 hash
  4. 可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。
  6. ```schema: scope="body"
  7. {
  8.     "type": "tabs",
  9.     "tabs": [
  10.         {
  11.             "title": "Tab 1",
  12.             "hash": "tab1",
  13.             "tab": "Content 1"
  14.         },
  16.         {
  17.             "title": "Tab 2",
  18.             "hash": "tab2",
  19.             "tab": "Content 2"
  20.         }
  21.     ]
  22. }

默认显示某个选项卡

主要配置activeKey属性来实现该效果，共有下面两种方法：

配置 hash 值

支持变量，如 "tab${id}"

```schema: scope=”body” { “type”: “tabs”, “activeKey”: “tab2”, “tabs”: [ { “title”: “Tab 1”, “hash”: “tab1”, “tab”: “Content 1” },

  1.     {
  2.         "title": "Tab 2",
  3.         "hash": "tab2",
  4.         "tab": "Content 2"
  5.     }
  6. ]

}

  2. #### 配置索引值
  4. 单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。支持变量，如`"${id}"`
  6. ```schema: scope="body"
  7. {
  8.     "type": "tabs",
  9.     "activeKey": 1,
  10.     "tabs": [
  11.         {
  12.             "title": "Tab 1",
  13.             "tab": "Content 1"
  14.         },
  16.         {
  17.             "title": "Tab 2",
  18.             "tab": "Content 2"
  19.         }
  20.     ]
  21. }

动态设置选项卡

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "key": "tab2"
  5.     },
  6.     "body": [
  7.         {
  8.             "type": "tabs",
  9.             "activeKey": "${key}",
  10.             "tabs": [
  11.                 {
  12.                     "title": "Tab 1",
  13.                     "hash": "tab1",
  14.                     "tab": "Content 1"
  15.                 },
  17.                 {
  18.                     "title": "Tab 2",
  19.                     "hash": "tab2",
  20.                     "tab": "Content 2"
  21.                 }
  22.             ]
  23.         }
  24.     ]
  25. }

图标

通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。

```schema: scope=”body” { “type”: “tabs”, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1”, “icon”: “https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg“ },

  1.     {
  2.         "title": "Tab 2",
  3.         "tab": "Content 2"
  4.     }
  5. ]

}

  2. ## mountOnEnter
  4. 只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。
  6. ## unmountOnExit
  8. 如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`"unmountOnExit": true`。
  10. ## 监听切换事件
  12. ```schema: scope="body"
  13. {
  14.     "type": "tabs",
  15.     "activeKey": "tab2",
  16.     "onSelect": "alert(key)",
  17.     "tabs": [
  18.       {
  19.         "title": "Tab 1",
  20.         "hash": "tab1",
  21.         "tab": "Content 1"
  22.       },
  23.       {
  24.         "title": "Tab 2",
  25.         "hash": "tab2",
  26.         "tab": "Content 2"
  27.       }
  28.     ]
  29.   }

会传递 key 参数和 props

属性表

属性名 类型 默认值 说明
type string "tabs" 指定为 Tabs 渲染器
className string 外层 Dom 的类名
tabsMode string 展示模式，取值可以是 line、card、radio、vertical、chrome、simple、strong、tiled、sidebar
tabsClassName string Tabs Dom 的类名
tabs Array tabs 内容
source string tabs 关联数据，关联后可以重复生成选项卡
toolbar SchemaNode tabs 中的工具栏
toolbarClassName string tabs 中工具栏的类名
tabs[x].title string Tab 标题
tabs[x].icon icon Tab 的图标
tabs[x].iconPosition left / right left Tab 的图标位置
tabs[x].tab SchemaNode 内容区
tabs[x].hash string 设置以后将跟 url 的 hash 对应
tabs[x].reload boolean 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用
tabs[x].unmountOnExit boolean 每次退出都会销毁当前 tab 栏内容
tabs[x].className string "bg-white b-l b-r b-b wrapper-md" Tab 区域样式
tabs[x].closable boolean false 是否支持删除，优先级高于组件的 closable
tabs[x].disabled boolean false 是否禁用
mountOnEnter boolean false 只有在点中 tab 的时候才渲染
unmountOnExit boolean false 切换 tab 的时候销毁
addable boolean false 是否支持新增
addBtnText string 增加 新增按钮文案
closable boolean false 是否支持删除
draggable boolean false 是否支持拖拽
showTip boolean false 是否支持提示
showTipClassName string '' 提示的类
editable boolean false 收否可编辑标签名
scrollable boolean true 是否导航支持内容溢出滚动。（属性废弃）
sidePosition left / right left sidebar 模式下，标签栏位置

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change `event.data.value: number \ string` 选项卡索引 切换选项卡时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
changeActiveKey `activeKey: number \ string` 选项卡索引 激活指定的选项卡