From af82f642f0ff2ae5a5d4f1b9a3eb1f43a270c121 Mon Sep 17 00:00:00 2001 From: lvxiaojiao Date: Thu, 28 Dec 2023 20:59:57 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dtabs=E6=BF=80=E6=B4=BB?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=8A=A8=E4=BD=9C=E5=A4=B1=E6=95=88=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/tabs.md | 80 ++++++++++++++-------------- packages/amis/src/renderers/Tabs.tsx | 26 +++++---- 2 files changed, 55 insertions(+), 51 deletions(-) diff --git a/docs/zh-CN/components/tabs.md b/docs/zh-CN/components/tabs.md index d7d735594..8fd0e2d91 100755 --- a/docs/zh-CN/components/tabs.md +++ b/docs/zh-CN/components/tabs.md @@ -722,9 +722,7 @@ order: 68 } ``` - - -## title自定义 +## title 自定义 > 3.2.0 及以上版本 @@ -835,44 +833,44 @@ order: 68 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| --------------------- | --------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------- | -| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 | -| defaultKey | `string` / `number` | | 组件初始化时激活的选项卡，hash 值或索引值，支持使用表达式 `2.7.1 以上版本` | -| activeKey | `string` / `number` | | 激活的选项卡，hash 值或索引值，支持使用表达式，可响应上下文数据变化 | -| className | `string` | | 外层 Dom 的类名 | -| linksClassName | `string` | | Tabs 标题区的类名 | -| contentClassName | `string` | | Tabs 内容区的类名 | -| tabsMode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical`、`chrome`、`simple`、`strong`、`tiled`、`sidebar` | -| tabs | `Array` | | tabs 内容 | -| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 | -| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 | -| toolbarClassName | `string` | | tabs 中工具栏的类名 | -| tabs[x].title | `string` \| [SchemaNode](../types/schemanode) | | Tab 标题，当是 [SchemaNode](../types/schemanode) 时，该 title 不支持 editable 为 true 的双击编辑 | -| tabs[x].icon | `icon` | | Tab 的图标 | -| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 | -| tabs[x].tab | [SchemaNode](../types/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].tip | `string` | | `3.2.0及以上版本支持` Tab 提示，当开启 `showTip` 时生效，作为 Tab 在 hover 时的提示显示，可不配置，如不设置，`tabs[x].title` 作为提示显示 | -| 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 | 是否可编辑标签名。当 `tabs[x].title` 为 [SchemaNode](../types/schemanode) 时，双击编辑 Tab 的 title 显示空的内容 | -| scrollable | `boolean` | true | 是否导航支持内容溢出滚动。（属性废弃） | -| sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 | -| collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 | -| collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 | -| swipeable | `boolean` | false | 是否开启手势滑动切换（移动端生效） | +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------- | --------------------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 | +| defaultKey | `string` / `number` | | 组件初始化时激活的选项卡，hash 值或索引值，支持使用表达式 `2.7.1 以上版本` | +| activeKey | `string` / `number` | | 激活的选项卡，hash 值或索引值，支持使用表达式，可响应上下文数据变化 | +| className | `string` | | 外层 Dom 的类名 | +| linksClassName | `string` | | Tabs 标题区的类名 | +| contentClassName | `string` | | Tabs 内容区的类名 | +| tabsMode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical`、`chrome`、`simple`、`strong`、`tiled`、`sidebar` | +| tabs | `Array` | | tabs 内容 | +| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 | +| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 | +| toolbarClassName | `string` | | tabs 中工具栏的类名 | +| tabs[x].title | `string` \| [SchemaNode](../types/schemanode) | | Tab 标题，当是 [SchemaNode](../types/schemanode) 时，该 title 不支持 editable 为 true 的双击编辑 | +| tabs[x].icon | `icon` | | Tab 的图标 | +| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 | +| tabs[x].tab | [SchemaNode](../types/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].tip | `string` | | `3.2.0及以上版本支持` Tab 提示，当开启 `showTip` 时生效，作为 Tab 在 hover 时的提示显示，可不配置，如不设置，`tabs[x].title` 作为提示显示 | +| 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 | 是否可编辑标签名。当 `tabs[x].title` 为 [SchemaNode](../types/schemanode) 时，双击编辑 Tab 的 title 显示空的内容 | +| scrollable | `boolean` | true | 是否导航支持内容溢出滚动。（属性废弃） | +| sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 | +| collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 | +| collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 | +| swipeable | `boolean` | false | 是否开启手势滑动切换（移动端生效） | ## 事件表 diff --git a/packages/amis/src/renderers/Tabs.tsx b/packages/amis/src/renderers/Tabs.tsx index 8ac0e9e06..cc84b2b1c 100644 --- a/packages/amis/src/renderers/Tabs.tsx +++ b/packages/amis/src/renderers/Tabs.tsx @@ -29,6 +29,7 @@ import {FormHorizontal} from 'amis-core'; import {str2AsyncFunction} from 'amis-core'; import {ScopedContext, IScopedContext} from 'amis-core'; import type {TabsMode} from 'amis-ui/lib/components/Tabs'; +import isNaN from 'lodash/isNaN'; export interface TabSchema extends Omit { /** @@ -620,6 +621,15 @@ export default class Tabs extends React.Component { const {dispatchEvent, data, env, onSelect, id} = this.props; const {localTabs} = this.state; + // 获取激活元素项 + const tab = localTabs?.find( + (item, index) => key === (item.hash ? item.hash : index) + ); + + if (!tab) { + return; + } + env.tracker?.({ eventType: 'tabChange', eventData: { @@ -627,10 +637,6 @@ export default class Tabs extends React.Component { key } }); - // 获取激活元素项 - const tab = localTabs?.find( - (item, index) => key === (item.hash ? item.hash : index) - ); const rendererEvent = await dispatchEvent( 'change', @@ -667,13 +673,13 @@ export default class Tabs extends React.Component { */ doAction(action: ActionObject, args: any) { const actionType = action?.actionType as string; - let activeKey = args?.activeKey as number; - // 处理非用户自定义key - if (typeof args?.activeKey !== 'string') { - activeKey--; - } + const tmpKey = Number(args?.activeKey); + let activeKey = isNaN(tmpKey) ? args?.activeKey : tmpKey; + if (actionType === 'changeActiveKey') { - this.handleSelect(activeKey); + this.handleSelect( + typeof activeKey === 'number' ? activeKey - 1 : activeKey + ); } }