mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
fix:修复tabs激活卡片动作失效问题
This commit is contained in:
lvxiaojiao
parent
4581c3858a
commit
af82f642f0
@ -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 | 是否开启手势滑动切换（移动端生效） |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -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<BaseSchema, 'type'> {
|
||||
/**
|
||||
@ -620,6 +621,15 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
|
||||
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<TabsProps, TabsState> {
|
||||
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<TabsProps, TabsState> {
|
||||
*/
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user