ant-design-pro
前端-wjh
这个作者很懒,什么都没留下…
展开
-
antd pro(V5) 实现多tab
官方不支持多tab,所以需要自己去处理根据以往的经验这个不是很复杂,主要的技术点如下:1.样式(抄的vue-element-admin)2.antd pro项目干预点app.tsximport TagView from '@/components/TagView';import EventEmitter from '@ytCommon/utils/eventEmitter'; //发布订阅layout headerRender方法返回TagViewonPageChange 页面改变的时候利用原创 2021-01-23 16:27:28 · 4488 阅读 · 5 评论 -
antd pro(V5) 配置自定义路径
之前想配置一个公共模块的别名,不想使用"…/…/…/…/"这样的路径,由于没有看官方文档,直接去社区或者搜索引擎里找,没有找到方法。今天我心血来潮看了一下文档,发现它是有办法修改的之前一直都是自己瞎折腾,在tsconfig.json里面配置,其实应该在config/config.ts里配置,找对了方法实现就不难了。主要要改两个地方:1.config/config.tsimport path from 'path';export default defineConfig({ alias: {原创 2021-01-21 13:21:25 · 2555 阅读 · 0 评论 -
antd pro(V5) 按钮权限
antd-pro的权限跟我们用的不太一样,所以需要自己开发一套。主要思路如下:1.登录的时候获取所有的按钮并存到本地2.进入页面的时候根据code判断是否显示按钮(组件形式,props.children)3.特殊的(比如disabled)提供一个方法判断有无权限1.登录页let permissions = res.roleList[0].permissions;sessionStorage.setItem('btnInfo', JSON.stringify(getBtns(permission原创 2021-01-21 10:46:56 · 1941 阅读 · 0 评论 -
antd v5 修改筛选输入框placeholder
今天做筛选条件的时候看到所有的输入框都是请输入,想改变placeholder的值,但是直接修改placeholder无效,又没有啥文档,这就很操蛋了。后面想的是自定义一个input组件,代码如下: { title: '企业名称', dataIndex: 'corpName', renderFormItem: () => { return <Input allowClear placeholder="请输入企业名称" />;原创 2021-01-11 20:08:09 · 987 阅读 · 1 评论 -
antd-pro(V5) 多项目集合
之前做一个大项目的时候用的是微前端框架乾坤,结合实际情况做了如下总结:1.完成了多个项目聚合,独立开发打包2.我们项目用不到微前端,只是项目相关很类似,需要放在一起管理。3.安装依赖的时候需要安装基座,公共项目和真实项目,多次安装依赖。结合上述要求与痛点我们需要在antd-pro框架做如下改造:1.需要支持多个类似项目独立开发与打包2.不需要引入其他框架和库3.公用依赖包解决的办法也不是很难主要利用的是APP_ROOT,具体操作如下:/package.json"sys": "cross-原创 2021-01-06 11:08:16 · 1224 阅读 · 1 评论 -
antd-pro(V5)动态菜单之动态icon
之前做动态菜单的时候没有注意到Icon的问题,以为简单的加个参数即可,后面发现生成的是文本。在网上找了些资料,或者要引入全部的icons,或者写乱七八糟的方法,但是结合实际项目,这两种都不是我想要的。实际上项目开发中的菜单icon应该是设计师给的矢量图,上传到iconfont上生成字体图标,然后在项目里使用。antd-pro里使用iconfont不难,主要步骤如下:1.在iconfont上挑选或者上传图标,下载到项目中2.在global.less引入字体图标3.app.tsx页面menuDataR原创 2021-01-05 19:39:43 · 4009 阅读 · 0 评论 -
antd-pro(V5)动态菜单
一般情况下登录系统后菜单是由后端返回的,不是前端写死的。antd-pro也支持,修改的路径在app.tsx在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了,说明配置生效了,接下来就可以围绕这个配置做文章了,我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理,判断菜单里要展示哪些内容(比如替换字段,隐藏不显示的菜单,隐藏按钮等),处理好了后返回一个数组结构即可。示例代码如下export const layout:原创 2020-12-30 20:20:18 · 4626 阅读 · 0 评论 -
antd-pro(V5) request之请求拦截 响应拦截
最近想利用antd-pro(V5)重构一套系统供新系统使用,因为后端接口格式有自己的格式,不能改变。所以网络请求这块只能前端处理了。最开始我想的是使用之前封装的方法,结果发现不太好处理与antd-pro不一致的字段,通过各种手段完成了网络请求模块后发现必须使用any类型项目才能跑,还有就是破坏了antd-pro的约定,废弃。这次将技术栈由vue+element转移到react+antd-pro就不能老是强行加入自己的想法,我们能想到的作者早已经想过了,所以一般情况下不需要自己去创造什么,只需要顺着作者的原创 2020-12-30 19:33:48 · 8307 阅读 · 4 评论