- 博客(118)
- 收藏
- 关注
RSS订阅原创 antd Avatar.Group头像列表层叠顺序调整，第一个在最上面
实现原理非常简单，修改原生css，设置层组件z-index的值(假设子元素都是div，自行修改)ant design官网。
2024-05-22 11:16:42
184
原创 react 魔法之createPortal（复用子组件已写好的代码到父组件）
你是不是遇到过这样的问题，花费了很多精力在一个子组件中写好了一段代码，比如一个逻辑复杂的按钮，离发布已经不久了，产品这时告诉你这个按钮需要移动下位置，比如移动到父组件的页面顶部。从产品的角度，不就移个位置，有什么难的。但其实移动到上级甚至上上级的组件中，当前在子组件维护的所有状态，调用的方法是不是都要迁移过去，顿觉好坑。方案一：通过css定位实现，缺陷，如果有其它元素占用页面空间，就要重新改变定位值。方案二：就是我要说明的createPortal用法，大胆尝试一下，你会发现新大陆。
2024-02-29 11:03:53
295
原创 antd Pro ProFormList外部控制增加删除
通过button 触发actionRef.current?.add or actionRef.current?.remove
2023-06-15 16:32:38
1140
原创 DragSortTable - 拖动排序表格设置 rowClassName 无效问题
部分行自定义样式：仅ProTable支持 DragSortTable未支持。ProTable组件 rowClassName属性。DragSortTable使用css has新属性子级为父级设置样式
2023-05-15 14:29:54
463
1
原创 antd Pro 统一错误处理及解决接口返回错误时页面出现的BizError
antd pro 统一错误处理及解决接口返回错误出现BizError页
2023-03-31 10:43:12
2730
原创 23年春节到了，学会使用控制台挂幅对联
用控制台输出对联，结合console的&c占位符书写样式，横批：空格+文字使用两个样式。对联：进行拆分，高、空格、福；分别使用样式。
2023-01-09 17:27:23
91
原创 力扣：检查句子中的数字是否递增
每个 token 要么是一个由数字 0-9 组成的不含前导零的 正整数 ，要么是一个由小写英文字母组成的 单词。示例，“a puppy has 2 eyes 4 legs” 是一个由 7 个 token 组成的句子：“2” 和 “4” 是数字，其他像 “puppy” 这样的 tokens 属于单词。给你一个表示句子的字符串 s ，你需要检查 s 中的 全部 数字是否从左到右严格递增（即，除了最后一个数字，s 中的 每个 数字都严格小于它 右侧 的数字）。重新排序后和去重的数组 json序列化比对。
2023-01-03 16:50:56
83
原创 图表:数据量级差异大的处理
如果各个特征的取值范围差别很大，会导致数量量小的数据会显示为一条近似直线.而你的模型对取值范围的差别又比较敏感，可以考虑归一化或者使用对数折线图
2022-11-14 15:42:41
2083
原创 git 配置commit-msg
有些时候公司会要求git commit 强制附加jira链接，确定本次提交属于某个具体任务，提供下解决思路。调研后决定使用husky和commitlint实现。
2022-09-01 10:11:51
1425
原创 使用rc-danmaku开发弹幕
rc-danmaku主要用到的方法有 onBulletOut、danmakuIns.getRestAmount()、push。本身不支持loop循环弹出, 结合组件内置的方法和hooks特性实现了 弹幕加载完成重复渲染。
2022-08-10 18:02:15
366
原创 antd pro 表单联动方法
antd ProFormSelect表单联动官方文档比较难找，我简单整理一下，以官网为准使用 ProFormDependency使用dependencies
2022-07-04 14:42:35
2888
原创 antd pro 服务端获取菜单及设置路由
app.tsx RunTimeLayoutConfig 运行时配置关键代码1：值为后台获取的真实菜单及路由信息initialState?.currentUser?.menus 为项目登录初始化后设置的菜单，此处可以在getInitialState中进行设置，对后台的菜单进行处理，转换为antd 的格式menuDataRender: () =>initialState?.currentUser?.menus,关键代码2： routes.ts 一定要设置好路由和组件对应关系，不然就算获取到路由
2022-04-27 12:06:15
5651
3
原创 js面试之随机数组每8个字符长度进行分割
示例数组const arr = [ 1234, 1234, 1234567, 12, 12, 12, 123456789999, 456, 9345, 56798987, 9999999999];分割结果const newArr = [ [ '1234', '1234' ], [ '1234567' ], [ '12', '12', '12' ], [ '123456789999' ], [ '456', '9345' ], [ '56798987' ], [ '99999
2022-03-27 16:48:07
1788
原创 数组中元素上下移位（交换顺序）
数组中元素上下移位（左右移位）// 交换数组元素const swapItems = (arr, index1, index2) => { arr[index1] = arr.splice(index2, 1, arr[index1])[0]; return arr;};// 上移const upRecord = (arr, $index) => { if ($index == 0) { return arr; } return swapItems(arr,
2021-12-07 18:29:56
399
原创 对象数组按照自定义的顺序排序
数组按照自定义的顺序排序// 自定义顺序let order = ['其他', '0']; // 测试数据1let order2 = ['0', '其他']; // 测试数据2let tableData = [{ name: '0' }, { name: '其他' }];// sort 根据索引排序tableData = tableData.sort((a, b) => { return order.indexOf(a.name) - order.indexOf(b.name);
2021-12-07 17:52:08
321
原创 js使用银行家舍入法导四舍五入不准确的处理方法
处理方法会不准确的一些数字 10.155 / 20.155/** * toFixed精度不准自动补零 * @param {string,int} num value * @param {int} s 保留几位 */ export const toFixed = (num, s) => { const times = Math.pow(10, s); let des = num * times + 0.5; des = des.toFixed(2)
2021-09-07 18:23:49
292
原创 js 金额格式化 toLocaleString方法
当需要把一串数据格式化为千分位并保留指定位数时,可以使用js的toLocaleString()方法,还可以自动补上0进行占位,默认保留两位小数,可自行位数var num = 1234.2345num.toLocaleString(‘zh’, {style:‘currency’, currency: ‘CNY’, minimumFractionDigits: 2});// “¥1,234.23”0.14*100 = 14.0000000000000020.1+0.2 = 0.300000000000
2021-03-31 15:21:16
2485
原创 数组互斥选择(列表中多个下拉框互斥选择)
有时候我们会有这样的需求，需要遍历多个相同的下拉框，且已选择的下拉选项不能被再次选择，此时我们就需要把已选择进行禁用！第一步、这时我可以定义一个数组来存储已选择项，定义一方法changeArr从原始数组中改变已选择项为禁用状态。第二步、当下拉框值改变时调用方法changeTempArr更改并获取新的已选择项，再次调用changeArr改变新的已选择项为禁用状态。var arr = [ { code: '1', name: 'fff1' }, { code: '2', name: 'fff2'
2021-01-14 15:00:25
1385
原创 正则表达式匹配指定字符之间的所有字符并替换为新字符
正则表达式匹配指定字符之间的所有字符并替换为新字符const str = 'sdf「七七八八」zdfs「东西南北」';const str2 = 'sdf「七七八八」s1df「东西南北」s2df「七七八八」';// 仅有一个匹配项：\s\S匹配「和」之间的所有字符const singleStr = str.replace(/「[\s\S]*」/g, `「新值」`)// 有多个匹配项：[^「|」]{0,}表示「和」之间除了「和」之外的所有字符const multiStr2 = str2.repla
2020-08-31 17:31:00
3890
原创 求两条直线的交点坐标
业务中需要计算两条折线图的交点坐标，假设折线图仅有一个交点的情况，先求出x轴位置差最小（绝对值）的坐标，再分别拿前一个节点，求出坐标，如果没有求出，则取下一个节点进行计算交点坐标方法(涉及求线段交点的几何计算)参考：谈谈"求线段交点"的几种算法(js实现,完整版)/** * 顺序无关，ab,cd为线段 * @param {*} a 线段ab起点坐标 * @param {*} b 线段ab终点坐标 * @param {*} c 线段cd起点坐标 * @param {*} d 线段ab
2020-08-07 18:13:36
7063
原创 正则匹配字符串中的相同项
正则匹配字符串中的相同项，再精确匹配数字并取出最大值业务中多层嵌套的数组对象，每个对象都有一个唯一值，需要过滤这唯一值，如果有新对象加入，需要把新的对象也添加一个唯一值这时考虑把数组对象转换为字符串，用正则表达式处理字符串，进而取出唯一值数组，取出最大值+1，可以生成新的唯一值考虑使用正则表达式实现类似于以下代码const content = "[{a:1,bbccdda:2,bbccdda:3,bbccdd]}"; // 简单举例const str1 = content.match(/a:\
2020-07-17 21:30:05
1494
原创 递归实现多级菜单遍历，附antd的menu实现方案
递归实现的方法，通过是否包含children决定是否需要递归调用/** * * @param { 路由列表 } data * @param { 从地址栏获取的路由 } pathKey * openKey是添加的是否展开父菜单的参数 */const initKey = (data, pathKey) => { const list = []; const key = null; const getList = data => { data.map(item =&g
2020-07-08 10:31:53
4023
转载 RGB 转 Hex 和 Hex 转 RGB
hex转rgb颜色const hexToRgb = hex => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16).toString(), g: parseInt(result[2], 16).toString(), b: parseInt(result[
2020-06-03 09:44:20
408
原创 正则去掉中英文逗号及空格
// 转换中文逗号及去掉空格const str = "张三, 李四 ,王五,tom, jack ，lucy "const newStr = str.replace(/，/, ',').split(',').map(item => item.trim()).join(',');console.log(newStr);
2020-05-22 17:04:39
1797
2
原创 数组中相同属性值进行分组，支持补全（含区间日期枚举方法），可实现ant desgin 动态列
开发中遇到数组有多个属性相同的的对象需要合并为一个对象，并生成新的数组，用以实现ant desgin 的动态列功能。耗费了一天时间。整理下实现的逻辑const dates = [ '2020-04-20', '2020-04-21', '2020-04-22', '2020-04-23', '2020-04-24', '2020-04-25', '2020-04...
2020-04-30 19:46:57
347
原创 数组find方法查找的对象不存在
数组find方法使用时的问题在查询数组中某个对象，并获取对象的属性值时报错导致整个页面打不开的问题const array1 = [{id: 1, name: 2},{id: 3, name: 4} ];const found = array1.find(element => element.id === 2).name // 输出undefined;console.log(foun...
2020-04-14 16:12:05
2098
原创 清除electron应用缓存
在菜单栏添加清除按钮配置清除项const clearObj = { storages: ['appcache', 'filesystem', 'indexdb', 'localstorage', 'shadercache', 'websql', 'serviceworkers', 'cachestorage'],};工具栏{ label: '重载', accelerator...
2020-03-09 14:25:53
22529
2
转载 react setState持续修改拿不到最新值的问题
setState机制react setState持续修改拿不到最新值的问题，setState()实际上可以接受一个函数作为参数，函数的首个参数就是上一次的state。参考： 掘金const file = {d: 1};this.setState( prevState => { return { fileList: [...prevState.fileList, file]...
2020-03-06 14:50:26
2450
原创 数组按照中文名称排序
var arr = ['南京', '北京', '上海', '杭州', '深圳']; function sortChinese (arr) { // 参数： 排序的数组 arr.sort(function (item1, item2) { return item1.localeCompare(item2, 'zh-CN'); }) } sortChinese(arr) ...
2020-03-06 14:43:46
1736
原创 过滤对象数组中key值相同的数据(数组合并去重)
如果有遇到一个数组中存储多个对象，有部分对象的某一个键值是相同的，需要过滤掉重复项的实现方案const arr =[ { "count": 1095, "month": "三月", }, { "count": 1106, "month": "三月", }, { "count": 987, "month": "四月", },...
2020-03-06 14:41:27
5602
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人