随笔分类 - TypeScript
摘要：项目使用的react ant-design-pro版本 5.2.0 bpmn-js版本 6.3.4 注意: 不同版本的bpmn写法不一样,我这个写法是适用6.3.4的版本,较新的版本可能不适用 如果使用vue或其他框架,写法按照你框架的写法, bpmn-js调用的方法还是一样的 效果图: 查看流程图
阅读全文
摘要：如图,要实现的功能,将已点击过的菜单展示在顶部的tabs中,切换tab内容缓存.删除tab后清除页面缓存,点击菜单再打开是新页面 实现: 使用的是react-activation,其中有umijs的实现demo 官网地址https://www.npmjs.com/package/react-acti
阅读全文
摘要：如图,需要把全部的icon展示出来,可以选择 ant-design的icon使用一般是用到哪个引入.当然也可以引入全部的icon 并且可以通过传入component来创建icon 实现方法: 注意点: 获取到的全部icons里面有一些是fuanction,要过滤掉 import React from
阅读全文
摘要：ant-design-pro项目的菜单可以在config文件夹下的routes.ts文件里配置. 如果需要通话后端数据接口获取,官方也提供了方法 routes.ts文件里的路由还是要添加,和静态路由是一样 菜单接口数据, commonLayout公共页面部分 和redirect菜单重置部分不需要了,
阅读全文
摘要：创建流程时,会涉及节点的拖拽,添加,删除 以及节点内容的修改 效果图 官网例子: https://reactflow.dev/docs/examples/drag-and-drop/ 分步实现,每一步新增的功能代码用红色标记 实现节点拖拽 主要是增加两个函数onDragOver onDrop将选择的
阅读全文
摘要：React Flow流程组件用起来还是挺简单的,能满足一些基本的流程配置.可以通过自定义配置节点实现不同需求 官网地址: https://reactflow.dev/docs/introduction/ 可以浏览一遍基本API在结合官网给的例子,快速开发.官网给了很多例子,很方便 效果图: 使用:
阅读全文
摘要：table表格支持这种树形可展开的形式,只需要在tableData中有children数据 不过这种用法是一开始获取表格数据时,就把children数据拿到了 实际场景中可能需要点击展开按钮时再去调取children数据 可以有两种方法实现这个需求 第一种: 通过expandable的onExpan
阅读全文
摘要：Protable自带表单筛选,一般场景适用. 也提供了一些api,方便不同场景使用.这里列出几种常用的属性 api: 1. labelWidth form表单label的宽度,可以是number或者'auto'.默认是80px,实际使用设置为auto更好 设置方法 <ProTable ... sea
阅读全文
摘要：使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色 ant-design-pro可以通过config.ts配置全局主题色 所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/a
阅读全文
摘要：微服务现在挺火的,优点也很明显 如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码 在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umijs.org/zh-CN/plugins/plugin-qiankun.比较简单,实际使用场景会有特殊情况 我根据自己项目
阅读全文
摘要：EditableProTable可编辑表格,编辑时默认提供了保存,删除,取消功能,如图,这三个功能是文字形式 可以自定义删减功能,需要什么功能就返回什么 但是如果不想要文字,想用图标作为删除,如图,就需要自定义了 actionRender可以返回DOM元素,所以,只需要返回自定义的图标就可以了 需要
阅读全文
摘要：代码源码: https://github.com/shengbid/antdpro-demo/tree/main/src/pages/Table/selectTable 如图: 表格多选后,选择下一页,要保留之前选择的数据 代码 import React, { useState } from 're
阅读全文
摘要：使用场景: 当前输入组件的验证需要根据其他项的值进行变化 如: 产品分类选择了必填产品,产品名称就是必填,如果选择其他,就不是必填 这里展示两种校验 一种是填写时,输入组件的验证,一般是 是否可编辑disable 是否展示isshow等 另外是点击提交时,rules校验,是否通过校验方法 主要是改变
阅读全文
摘要：githup源代码https://github.com/shengbid/antprov5/blob/master/src/pages/product/addProduct/index.tsx 使用场景: 一个form表单组件,提交按钮在父组件,点击时要调用子组件方法获取子组件数据 child.ts
阅读全文
摘要：DatePicker时间范围限制,都是对disabledDate这个参数赋值,返回Boolean值,true是不可选,false是可选 disabledDate是一个函数,能拿到current当前鼠标移入的时间,只需要对这个时间进行限制就可以了 antd的DatePicker会引入moment,我们
阅读全文
摘要：项目使用的是ant-pro模板 有个可编辑表格的需求,效果图如下 ant-pro提供了EditableProTable 组件,我使用的是这种https://procomponents.ant.design/components/editable-table 不过这里展示的默认都是input输入框,我
阅读全文
摘要：在react项目中使用sass-module引入样式文件报错 一开始的写法是这样,当时查了很多网上的资料也是这种写法,然鹅这种写法现在并不行 根据上图的报错,options传入了一个非法的参数getLocalIdent,这个getLocalIdent其实是modules的参数 然后修改一下写法 再次
阅读全文
摘要：项目是通过create react app创建的,要配置一个根路径.我的项目是通过npm run eject已经解开了config配置文件,所以这里就写一下,有config配置文件的根路径配置方法.当然没又npm run eject出配置文件也是可以设置根路径的,这个配置之后再写 找到config下
阅读全文
摘要：TypeScript是什么 TypeScript是由微软公司开发的一个开源JavaScript的超集,主要提供了类型系统和对ES6的支持,可以编译成纯JavaScript,主要就是对JavaScript中定义的变量进行类型检查 运行TypeScript 全局安装: npm install -g ty
阅读全文
