create-umi-full
v1.0.4
Published
create-umi-full
Downloads
2
Readme
@umijs/create-umi-full
本脚手架基于@umijs/create-umi
创建项目: npx create-umi-full@latest
主要库版本如下:
{
"@ant-design/icons": "^5.0.1",
"@ant-design/pro-components": "^2.4.4",
"@umijs/max": "^4.0.83",
"@umijs/utils": "^4.0.83",
"antd": "^5.4.0"
}
主要增加、调整以下内容
添加路由示例代码
添加request配置示例代码
添加getInitialState示例代码
添加登录页面示例代码
services/*示例代码调整
ProTable封装
Modal支持拖拽
DEMO 示例
// ProTable封装
// 使用components/ProComponents 导出 ProTable传入services下的api 名称自动实现接口请求,不再需要传入request。如:
pages/Table/index.tsx
import {ActionType,FooterToolbar,PageContainer,ProDescriptions,ProTable} from '@/components/ProComponents';
<ProTable
headerTitle="查询表格"
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
toolBarRender={() => [
<Button
key="1"
type="primary"
onClick={() => handleModalVisible(true)}
>
新建
</Button>,
]}
//不再需要传入request
api='queryUserList'
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
// Modal支持拖拽
import {PageContainer} from '@ant-design/pro-components';
import {Modal, Button,Space} from '@/components/Antd'
const HomePage: React.FC = () => {
const onFinish = () => {
return new Promise(resolve => {
setTimeout(() => {
// true关闭弹窗,false不关闭
resolve(true);
}, 2000)
})
}
return (
<PageContainer title='Home'>
<Space>
// 在 Modal 的基础上增加了 trigger ,无需维护 open 状态
<Modal title='可以拖拽的模态框' trigger={<Button>可以拖拽的模态框</Button>} onFinish={onFinish}>
<div>在 Modal 的基础上增加了 trigger ,无需维护 open 状态</div>
</Modal>
</Space>
</PageContainer>
);
};
export default HomePage;
联系方式
QQ:1580043700