Richard Yates Boy-CSDN博客

原创封装一个可回车事件，不能输入配置项options没有的值的AutoComplete

但是我们可以追踪到AutoComplete组件的源码，虽然并不能看很懂，但是可以看出组件是InternalSelectProps，RefSelectProps的共同构成，这里就不探究dataSource结构了。当CustomAutoComplete外面包裹着form表单时候，虽然CustomAutoComplete的值清空了，但是form表单给CustomAutoComplete的那个绑定name并没有清空，如何能让form表单绑定name也对应清空，目前我还没想出办法，也许可能要改造form表单，心累。

2024-03-25 16:16:01 235

原创 react hook实现todoList和更复杂的的递归编辑树操作

之前有个兄弟问图上效果怎么实现出来，点击+号可以无限增加页面，新增的时候就是编辑状态，鼠标移开就是菜单列表，双击又变成可编辑的状态。好了现在开始上强度，如果是下图效果那么该怎么做呢？感兴趣的可以自己想一下哟！

2023-06-14 18:18:50 243 1

原创在web页面实现代码编辑器

使用此技术，您可以将文件与路径对应起来，并创建一个完全多模型的编辑器。突然想起来之前一个需求，就是web页面画一个能输入代码的框子，这个我也找了好几个库，比如codemirror，不知道这个库是不是没有更新了还是怎么，怎么都下不下来依赖，最后选择了monaco-editor。产品一开始是希望输入代码还能出提示，出报错，就跟ieda,vscode那样，那不是痴人说梦，哪个在线运行代码能做到这样，连依赖都不确定，就给你报错，Java，Python都不可能给你语法报错的，只有js可能会报个语法错误。

2023-06-13 15:48:32 781

原创使用braft-editor实现简易版即时写文档并预览的富文本编辑器

最近在看各个富文本编辑库的时候，有点好奇，于是对比了一些，有draft-js，Slate.js。但是这些基本都是英文库，简单demo无法满足需求，比如插入截图和表格，这些复杂结构的数据，实现这些，必须自定义扩展，要想做到这些，通读一遍文档基本是必须，且内含的天坑，估计也是数不胜数。也不错，当然人家是吃这口饭的，就单独说插入表格这个吧，（浅吐槽一句csdn写文章的插入表格都还蛮low的）还有插入模板，语雀做的非常棒了，选中表格也能即时删除某列，更别说插入模板了。的文档就做的蛮好的，

2023-06-12 15:52:23 1201

原创关于echarts的N个图表N条线N种单位的封装

echarts封装，N图N线N轴

2023-01-30 13:31:51 233 1

原创 antd实现tree动态增删改和拖拽效果

react antd tree组件

2022-11-21 17:35:40 1003 2

原创 Force Chrome to sync bookmarks

Chrome浏览器同步标签

2022-09-07 15:35:17 185 2

原创 react useState更新异步问题

当我们使用react中useState这个hook时候，如下const [page, setPage] = useState(1);const handlerClick = (e)=>{ setPage(e.current); console.log(page);}当我打印page时候，此时page还是1，因为useState的更新是异步的，这和react的机制有关，要解决这个可以这样做1.使用useState的返回值 setPage(e.current); set

2022-04-02 17:04:50 4502 1

原创 antd Upload上传实现自定义上传

众所周知，Upload上传有个action的坑，就是你选择文件之后自动调用地址然后就会执行上传接口，这在某些情况的却是很好用的一个组件。但是如果要实现自定义的上传，如下图所示，就要阻止默认上传的事件。现在我们要实现点击保存按钮才进行上传，所以我们就需要在beforeUpload这个钩子函数里面阻止默认上传。 beforeUpload: file => { const fileType = file.name.split('.').pop(); if

2021-12-29 14:55:12 6109

原创关于多个await请求的阻塞

今天写业务代码时候的发生的例子，就是我有多个请求的数据，必须放在一个下拉框里面，但是js又是单线程的，我这一个接口报错，后面的都不会执行了。如下图所示let aa = await getAA(id);let bb = await getBB(id);let cc = await getCC(undefined);let dd = await getDD(id);let ee =await getEE(id);这时候我们想要接着运行后面的js，可以对所以的await请求进行try catch操作

2021-10-18 14:15:56 719 5

原创对象属性过滤，基于antd 表格 Form 食用

当我们在使用antd 的 form 组件时候是不是想一口气得到所有表单的值然后传给接口就完事了，但是某些表单并非必填项，这就需要我们过滤掉一些值为"",undefined,null的数据了。const objectPropertyTransfer = obj => { if (!obj || !typeof obj === 'object') return; const keys = Object.keys(obj); for (var key of keys)

2021-09-15 15:07:33 240

原创 es11操作符语法??和?.

const result = data?.list?.num ?? 16?. 可选链操作符?? 非空运算符释意：如果 data 或者 data.list 或者 data.list.num 不存在（值为 null 或者 undefined）时,表达式停止计算并返回 undefined。 ?? 非空运算符左边为null，undefined，返回右边的值，否则返回左边的值...

2021-08-03 17:10:25 2743

原创 js循环异步操作集合

先看一段代码 function getTime(seconds) { return new Promise(resolve => { let one = fetch(seconds).then(response => response.json()); resolve(one) }) } let reqList = [];//装着所有URL的数组 for (let i = 0; i &l

2021-06-23 16:34:09 149 1

原创 js生成随机颜色数组

一，生成数组形式var colors = [];// 生成随机颜色for (var i = 0; i < 20; i++) { colors.push( [ 'rgba( ' + (Math.random() * 255 >> 0) + ',' + (Math.random() * 255 >> 0) + ',' + (Math.random() *

2021-06-21 15:33:26 1025

原创 js使用正则截取字符串

let func = ‘all(#3)’;想要得到3这个值let value = func.match(/#(\S*)/)[1].split(')')[0];console.log(value)

2021-06-18 15:16:19 356

原创 js数组对象去重的几种方式

2021-04-23 10:45:05 211 2

原创一行代码提取数组中的数字，仅数字

const arr = [1,2,33,45,'ee','11','-',1.9923] let arr1 = arr.filter((item, i) =>(typeof item !="string")&& Number(item)==parseFloat(item)); console.log(arr1)

2021-04-21 14:43:53 378 1

原创发布npm功能模块到私有服务器进行复用

发布在项目目录下运行npm run buildbuid成功后cd build配置镜像地址到服务器指定资源路径位置npm config set registry=http://xxx:18000/mm/n/登录服务器（到资源位置处）npm login -registry=http://xxx:18000/mm/n/输入用户名，密码，邮箱，提示登录成功后，输入发布命令npm publish调用进入到需要用到插件的项目第一种方案：存插件到本地（从服务器下载不下来的情

2021-03-02 15:33:49 268

原创使用react-beautiful-dnd进行拖拽

使用：npm i react-beautiful-dnd在项目组件中使用如下：class组件代码：import React, { Component } from "react";import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; //初始化数据const getItems = count => Array.from({ length: count }, (v, k) => k

2021-03-01 15:47:21 1028 7

原创备忘

window.onresize = ()=>{let myChart = echarts.init(document.getElementById(“main4”));myChart.resize();}

2021-02-23 15:40:52 135 2

原创流量单位换算的几种方式

function bytesToSize(bytes) { if (bytes === 0) return '0 b'; var k = 1024, // or 1024 or 1000 sizes = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'], i = Math.floor(Math.log(bytes) / Math.log(k));//Math.floor返回小于等于x的最大整数:,Math.log返回k的自然对

2021-02-03 15:49:24 811

原创多个div循环点击谁谁变色

之前朋友遇到个题目就是多个相同div，点击谁变色，我们各自有各自的方法，但感觉方法都蛮差劲的hhhhhhh他的：我的：也不知道有没有更好的方法~~~~

2021-01-05 16:09:33 874 2

原创 js多个异步请求并行执行（fetch,axios+promise）

function sendRequest(arr, max, callback) { let fetchArr = [], // 存储并发max的promise数组 i = 0; function toFetch() { if (i === arr.length) { // 所有的都处理完了，返回一个resolve return Promise.resolve();

2021-01-05 15:20:54 1255 1

原创一行代码判断数组对象是否有空值

let list = [ { name:'hel', age:11 }, { name:'22', age:null }]要求如果数组某一项为空值返回false一行代码解决let boolean = list.every(o=>Object.keys(o).every(i=>o[i]))

2020-12-25 11:44:57 1679 3

原创 antd ProTable 高级表单实现行编辑表格（能直接用调用接口那种）

代码全部如下：import React, { useState } from 'react';import { EditableProTable } from '@ant-design/pro-table';import ProField from '@ant-design/pro-field';import { ProFormRadio } from '@ant-design/pro-form';import ProCard from '@ant-design/pro-card';import

2020-12-23 18:50:47 7685 10

原创 git上传很多文件报错解决

报错内容为Enumerating objects: 286, done.Counting objects: 100% (286/286), done.Delta compression using up to 8 threadsCompressing objects: 100% (258/258), done.Writing objects: 100% (286/286), 4.45 MiB | 25.06 MiB/s, done.Total 286 (delta 22), reused 0 (

2020-12-22 18:17:06 3629

原创 antd 高级表单使用报错解决

因为之后有分布表单的需求，所以今天抽空就看了看例子，照着官方文档把那些需要的包安装导入完成后，发现一直报几个大错，页面一直空白，报错如下我是把需要的包安了装装了安都不好使，最后把antd这个包重新安装才可以的。我的antd的版本是4.4.0，升级之后是4.9.4，然后就可以了，这他娘的真是坑死人了。...

2020-12-22 16:34:58 1404

原创 (备忘)运行单个vue文件

全局安装 npm install -g @vue/cli-service-global然后切到想运行的vue文件目录下，执行cmd接着输入 vue serve xx.vue然后就会出现运行地址照着地址打开就行了

2020-12-21 18:37:43 1067

原创 react antd锚点自定义样式，图标

在页面导航里经常会看到这种样式的组件，antd里面有锚点和时间线可以办到，今天我主要使用锚点完成这种特效，但官方锚点的样式和那个小圆点是在太丑了啦，这里需要自己修改样式代码如下：import React, { useState, useEffect } from 'react';import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';import { Anchor } from 'antd'.

2020-12-21 17:12:58 2207 7

原创一行代码进行对象数组去重

const unit = (arr)=>arr.reduce((m,o)=>{m.set(o.name,o);return m;},new Map());

2020-12-15 16:00:23 87

原创关于antd table展开行expandable的坑和解决办法

最近遇到了antd 表格展开行的需求，然后遇到了非常恶心的事情，首先官方文档中只有expandedRowRender可以渲染组件，此为渲染层，这个属性方法有四个参数function(record, index, indent, expanded)，分别为当前行，下标，缩进,当前行状态（true为展开，false为关闭）。这个方法点击每个展开行都会执行一遍，默认不管是关闭和打开。然后我的需求是点击展开行要用到当前行id去请求一个接口渲染图表，此为异步操作，我一开始不想请求数据的逻辑写在expandedRow

2020-12-14 16:11:33 12969

空空如也

空空如也