业务
常见业务需求
南城夏季
一路浅行
展开
-
react 使用 富文本编辑器并支持MD,同时支持<Form.Item/>的可控输入
在react ant 使用中,我们可以看到,Input 输入变化后,值会自动绑定到form实例上,同时,form set值以后,Input 也会跟着变化。这里面Input 默认挂载了两个属性value和onChange,从而做到了双向绑定,所以我们也可以实现一个这个的自定义可控组件。原创 2024-06-03 14:37:05 · 305 阅读 · 0 评论 -
css画一个缺了右边三角形的长方形
画一个缺了右边三角形的长方形。原创 2024-05-17 17:44:56 · 274 阅读 · 0 评论 -
react hook使用UEditor引入秀米图文排版
里面坑比较多,细节也比较多以下使用的是react 18 + ice3.0,使用其他react脚手架的配置基本相同,例如umi4。原创 2024-02-21 15:19:22 · 1296 阅读 · 0 评论 -
前端设计模式
不变的部分:算法的使用方式不变,都是根据某个算法取得计算后的工资数额;我们可以把不变的部分和变化的部分拆分开来。变化的部分:算法的实现。原创 2023-12-28 09:59:48 · 625 阅读 · 0 评论 -
react ant upload上传请求参数变成了 file:[object object]
文件对象需要取里面的一层,即originFileObj。原创 2023-09-15 14:30:53 · 555 阅读 · 0 评论 -
react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单
让一级菜单进行全拼接,二三级等子菜单不做处理,仍然保持当前的path,也就是点击一级菜单自动打开它下面最深的第一个子菜单。可以看到每层菜单的path都只有当前的路径,没有进行全拼接。原创 2023-09-12 14:01:09 · 320 阅读 · 0 评论 -
react ant table 根据接口动态渲染表头
使request获取list,renderFormItem回调里面第二个参数中就有request的返回值,根据这个去渲染就可以了。原创 2023-07-13 11:10:36 · 1293 阅读 · 0 评论 -
前端js react vue怎么实现在线预览doc文档
目前在纯前端层面没有很好的方案,基本都需要服务端的介入。原创 2023-07-11 10:07:59 · 2065 阅读 · 0 评论 -
react ice 打包失败
可以看到图片路径找不到,但是实际上项目的图片路径是对的,复制地址可以打开图片,那是哪里的问题呢,其实这里粗心了,项目路径有中文导致打包时无法正确找到对应文件,把不良品这个中文换成英文就可以了。原创 2023-05-09 10:13:13 · 138 阅读 · 0 评论 -
react ice3 配置postcss-pxtorem
【代码】react ice3 配置postcss-pxtorem。原创 2023-04-28 17:28:46 · 377 阅读 · 0 评论 -
element table合并表头后乱序了
这块代码看似没有什么问题,但是实际上渲染的时候会乱序,这里有个小技巧,直接加一列空白列,让空白列乱序,而其它列保持正常。这里封装了一个通用表格,所有列配置通过父组件传入。例如:本来应该排在第一列的表头跑到最后一列了。原创 2023-04-14 11:01:15 · 298 阅读 · 0 评论 -
scale 缩放后还是满屏怎么解决(如何满屏缩放)
需要网站等比例进行缩放,且缩放后还是可以保持满屏,一开始使用了scale,但是无论怎么设置还是会留有空隙,所以觉得采用js来控制,直接获取所有节点,缩小他们的字体大小。原创 2023-04-04 16:37:49 · 381 阅读 · 0 评论 -
前端小技巧
自定义指令是用来操作DOM的,尽管vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展,不仅可用于定义DOM操作,而且是可复用的。参数说明:dire指令名称el当前绑定的dom元素bindings指令解析后的结果,包括指令名称、参数、表达式等,bindings.value返回的是表达式vnode对应的虚拟dom//对象注册形式示例: Vue . directive('dire' , {原创 2023-03-14 16:55:50 · 2047 阅读 · 2 评论 -
js关闭其他标签页
场景: 你自己是a网站,你要新开一个tab页跳转到外部b网站,在b网站操作完成后,关闭b网站。原创 2023-03-14 15:58:10 · 605 阅读 · 0 评论 -
前端脚手架搭建
为了更好的理解项目的配置,以下对一个通用的package.json文件的配置项进行逐一解释引入 commander 依赖bin/cli.js// 打印命令行输入的值 console . log("project name is " + name) }) program . parse()然后执行npm link将应用lw-cli链接到全局:完成之后,在命令行中执行lw-cli这个时候就有了 lw-cli 命令使用的说明信息,在Commands下面出现了我们刚刚创建的create命令。原创 2023-03-10 13:36:43 · 1269 阅读 · 0 评论 -
h5在小程序中调用微信扫码功能
目前扫码模块是用原生小程序写的页面,登录和之后跳转的页面都是通过webView嵌套在小程序里面的h5。原创 2023-02-28 14:53:55 · 2023 阅读 · 0 评论 -
js在pc端调用摄像头拍照使用getUserMedia报错undefined
百度了才知道是本地起的服务不是https,获取不到摄像头权限。目前有个需求是要在微信浏览器中进行人脸,想到的一个方案是前端进行拍照然后传给后端调用第三方服务进行人脸校验。方法,想在pc端进行设置,发现pc端是没有这个方法的。然后点击重启按钮就可以了。原创 2022-11-09 17:30:40 · 830 阅读 · 0 评论 -
react 验证码倒计时
【代码】react 验证码倒计时。原创 2022-10-25 16:44:16 · 979 阅读 · 1 评论 -
手写简易vue响应式
【代码】手写简易vue响应式。原创 2022-10-21 16:44:39 · 251 阅读 · 0 评论 -
js代码简写
【代码】js代码简写。原创 2022-10-21 12:05:24 · 83 阅读 · 0 评论 -
ant日历组件calendar转中文以及消息渲染
这里加入了完整的日历消息展示,消息从接口中获得,返回的是日历面板上每一天的消息信息,然后展示在日历中,如果只是需要转中文,则只需要看转中文的几个方法。最终的效果,可以直接在每天卡片上显示消息,也可以悬浮显示每天的消息。目前使用的项目用的是ice+ant+react ,项目中使用了calendar组件,但是组件中的星期,年份,月份都是英文的,按照官网的配置了转中文没有起作用。由于官网的配置没有生效,所以使用了一个最直接的方案:直接替换英文的dom节点的内容为中文的。原创 2022-09-30 14:56:04 · 1474 阅读 · 0 评论 -
ant组件库 message组件只响应了一次就失效了
但是只在第一个接口失败的时候触发了,第二个接口失败没有响应提示信息,后续的其它的提示error,info,warning,success都失效了。是一个对象,导致出错阻塞了后面message的触发。奇怪的是控制台并没有显示错误信息。,所以这个坑很容易被忽略掉。页面有3个接口请求,每次请求失败都会。中的err全部转成字符串的格式。排查代码,发现第二次使用。原创 2022-09-30 08:59:32 · 1220 阅读 · 0 评论 -
react 横向/水平无限消息滚动
效果如图:创建1个文件夹,里面存放两个文件,index.tsx和style.less:原理是就设置一个固定长度的父节点,然后消息内容的长度超过了父节点的长度,就会出现滚动条,这个时候设置一个定时器,让子节点即消息内容,一步步的向左边滚动,当向左边滚动完成以后马上需要回到原始位置,再重新滚动。原创 2022-09-27 14:40:52 · 2215 阅读 · 1 评论 -
react ice 不兼容火狐低版本浏览器
目前使用的是ice结合ant来开发的react项目,但是运行后在谷歌浏览器和ice浏览器没有问题,但是在火狐的低版本(2016之前的版本,基本是在版本号50以下的)上运行打开页面显示一片空白,并且没有任何的错误提示。一开始分析是不是react版本过高导致不兼容,后来查看老项目,发现react16照样可以在火狐50运行,于是排除了react的问题。现在页面可以打开了但是接口返回的是一个xml对象,并不是json对象。查看ice的配置,发现默认是使用了vite,于是在。原创 2022-09-27 09:56:32 · 949 阅读 · 0 评论 -
node-sass安装报错
一般都是node和node-sass的版本不兼容。原创 2022-09-23 15:28:38 · 252 阅读 · 0 评论 -
react antv(Ant Design Charts)怎么使用图表事件
【代码】react antv(Ant Design Charts)怎么使用图表事件。原创 2022-09-08 15:26:56 · 1802 阅读 · 1 评论 -
react ant table 表格合并单元格
将行数据中公司名相同的数据进行合并。原创 2022-09-07 13:50:49 · 501 阅读 · 0 评论 -
react set值会导致表单重置而清空数据
当输入完姓名的时候,需要把输入的姓名添加到关联对象的下拉框中供用户选择。但是输入姓名后,将值set到关联对象后,表单直接就清空了。在set后会自动清空表单,所有我们可以通过异步来恢复表单数据。原创 2022-09-02 11:30:15 · 737 阅读 · 0 评论 -
ant pro-table点击表格行高亮显示
直接在onRow事件中,捕捉到当前的节点,然后设置它高亮,然后再设置其它行的节点恢复默认样式。原创 2022-08-23 14:16:29 · 787 阅读 · 1 评论 -
git 更换文件名大小写无法提交 远程和本地不一致
这样下次提交的时候就会观察到本地和远程不一致的文件名和文件夹的名字。3、再将文件恢复,再次提交到git即可。2、删除对应文件并提交到git。1、先将要提交的文件备份。原创 2022-08-04 10:17:13 · 1270 阅读 · 0 评论 -
react的form动态校验rules 点击下拉就会清空表单
直接动态替换rules会导致form组件重置,如果要动态校验,应该在事件中根据条件执行不同的逻辑。原创 2022-07-22 17:50:45 · 1050 阅读 · 0 评论 -
react ant protable 点击排序会自动调用接口
reactantprotable点击排序会自动调用接口,这个是ui库自带的,无法去除,因为无法判断事件来源是点击排序还是查询。原创 2022-07-22 17:44:41 · 452 阅读 · 0 评论 -
react ant protable 点击排序会自动调用接口
reactantprotable点击排序会自动调用接口,这个是ui库自带的,无法去除,因为无法判断事件来源是点击排序还是查询。原创 2022-07-21 19:03:18 · 415 阅读 · 0 评论 -
react Ant Design setFieldsValue 无效问题 bug
获取接口数据后,要set到表单中,但是set一直没反应。原创 2022-07-20 17:08:22 · 2435 阅读 · 0 评论 -
react protable ant设置表单查询条件
从a页面跳转到b页面,路由携带了参数,并且将参数作为b页面的查询条件,同时b页面对应的搜索表单也需要根据查询值来选中。设置initialValue在静态的情况下没问题,但动态设置时不生效。原创 2022-07-18 11:45:50 · 1559 阅读 · 0 评论 -
react路由跳转传参
代码】react路由跳转传参。原创 2022-07-18 11:02:46 · 1897 阅读 · 0 评论 -
react自定义右键事件
右键显示弹窗 const handleContextMenu = (e) => { e.preventDefault() // 此条件下才展示弹窗 if (e.target.nodeName === "DIV" && e.target.innerText !== "首页") { const x = e.clientX const y = e.clientY // 弹窗节点 const rightMenu = d原创 2022-05-12 17:44:22 · 2577 阅读 · 0 评论 -
react umi set值后没有更新
我们想要通过set修改值,然后拿到新值,没有生效const initTabs = [{ tab:'首页'}]const [tabList, setTabList] = useState(initTabs)useEffect(()=>{ setTabList([]) console.log(tabList)//还是initTabs的值并没有置空},[paths])有可能你会想到是不是加个settimeout,延迟去获取值?这样也没用的,initTabs s是引用类型,tabList维原创 2022-04-29 14:37:09 · 603 阅读 · 0 评论 -
umi react监听路由的变化
使用路由拦截的时候,当用户离开某个页面的时候需要给出提示,这时候就可以监听路由的变化来执行指定的操作。import { history } from 'umi'这段代码写在const的组件对象里面history.block((location, action) => { //每次路由变动都会走这里})...原创 2022-04-29 14:29:01 · 3836 阅读 · 0 评论 -
react Objects are not valid as a React child (found: object with keys {})问题
在使用React ant的protable组件时,在columns项中,有一项的valueEnum传递的是数组,但是组件支持的类型是对象。需要将数组改成对象就可以了原创 2022-04-29 14:25:50 · 1818 阅读 · 0 评论