随笔分类 - react.js
react.JS相关东西
摘要：项目使用的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
阅读全文
摘要：将antPro项目复制到另一项目后,安装依赖,启动后 页面一直在加载中,控制台报错 umi/node_modules/@babel/runtime/helpers/esm/defineProperty" does not exist in container. 解决方法,删除项目src里的.umi文
阅读全文
摘要：如图,需要把全部的icon展示出来,可以选择 ant-design的icon使用一般是用到哪个引入.当然也可以引入全部的icon 并且可以通过传入component来创建icon 实现方法: 注意点: 获取到的全部icons里面有一些是fuanction,要过滤掉 import React from
阅读全文
摘要：README.md文件是一个项目介绍,可以上传到githup,打开项目就能看到介绍 有时想插入图片怎么引入呢 在vscode中可以预览你的md文件,如图.如果引入本地项目中的图片,这样写在vscode能看到效果, 但是上传到git后就看不到了.右键查看了下发现图片地址变了,暂时没找到引入本地图片gi
阅读全文
摘要：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
阅读全文
摘要：有一个全国行政区域地图,可以点击下钻, 正常是先把地图引入,在注册 import china from './china.json' // 注册地图 echarts.registerMap('全国', china) 但是这种可以点击的,一开始就全部引入浪费,需要动态加载数据 json文件可以直接请求
阅读全文
摘要：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.比较简单,实际使用场景会有特殊情况 我根据自己项目
阅读全文
摘要：ProTable自带了表单搜索功能,默认的formitem是input类型,想要改变搜索类型,可以通过使用valuetype类型定义,或者自定义formitem 如图,如果想要这种下拉组件,或者时间组件 在columns中添加属性valueType就可以了 Protable支持的属性:文档 http
阅读全文
摘要：EditableProTable可编辑表格,编辑时默认提供了保存,删除,取消功能,如图,这三个功能是文字形式 可以自定义删减功能,需要什么功能就返回什么 但是如果不想要文字,想用图标作为删除,如图,就需要自定义了 actionRender可以返回DOM元素,所以,只需要返回自定义的图标就可以了 需要
阅读全文
摘要：项目是react的,引入了bpmnjs流程引擎,之前好好的,突然一次项目更新后,流程设计页面报错 unhandled error in event listener TypeError: bo.get is not a function unhandled error in event listen
阅读全文
摘要：正常菜单是在左侧,我们项目菜单比较多,要做成顶部和左侧结合的形式 如图: ant design pro官方文档支持这种格式 文档连接: https://procomponents.ant.design/components/layout/#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7
阅读全文
摘要：页面中使用了日期组件,新增没问题,在编辑赋值时报错,赋值的日期格式receiptDate: "2021-09-17" date.clone is not a function 看了一下文档, DatePicker与 TimePicker的value值需要moment属性 所以拿到值后,对日期进行转换
阅读全文
摘要：代码源码: https://github.com/shengbid/antdpro-demo/tree/main/src/pages/Table/selectTable 如图: 表格多选后,选择下一页,要保留之前选择的数据 代码 import React, { useState } from 're
阅读全文
摘要：antpro 的umi内置的useModel也可以实现全局数据流 示例图: 三个组件的数量可以共享 使用方法 在src目录下models文件夹,新建一个文件,文件名就是引入的数据对象 1. 2. 完整代码 /src/models/product.ts import { useState, useCa
阅读全文
