import { Modal, Tabs } from "antd";
import { useState } from "react";
import OneCom from "@/components/OneCom ";
import TwoCom from "@/components/TwoCom ";
const Demo: React.FC = () => {
const [activeKey, setActiveKey] = useState<string>('1');
const [disable, setDisable] = useState<boolean>(true);
const items = [
{
label: 'tabs1',
key: '1',
children: <OneCom />,
},
{
label: 'tabs2',
key: '2',
children: <TwoCom disable={disable} setDisable={setDisable} />,
}
]
return (
<>
<Tabs
destroyInactiveTabPane={true}
tabBarGutter={80}
items={items}
activeKey={activeKey}
onChange={(key) => {
if (activeKey !== '2') {
setDisable(true);
}
if (key !== '2' && !disable) {
Modal.confirm({
content: '该页面有未保存的更改,确定要切换吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
setActiveKey(key);
setDisable(true);
return true;
},
});
} else {
setActiveKey(key);
}
}}
/>
</>
);
};
export default Demo;
08-28
1281
11-16
5015
09-03
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交